DOBON.NETプログラミング道掲示板

■35416 / 親記事)  style.displayだと効率悪いから違うやり方をしたいです。
  
□投稿者/ えっぴー 一般人(1回)-(2023/05/11(Thu) 13:00:19)
  • アイコン環境/言語:[javascript] 
    分類:[その他] 

    style.displayだと効率悪いから違うやり方をしたいです。
    以下はhtmlです。
    なぜ効率悪いかというと、
    一つ一つ、
    セレクトごとに、
    document.getElementById('Box1').style.display = "";と、
    document.getElementById('Box1').style.display = "none";
    を書かなければならないからです。
    構文が長くなってしまい、非効率です。
    しかし、document.getElementById自体1つしか書けないのです。
    for文を使う必要があるのです。
    ご教授願えたら幸いです。
    <div class="col-auto my-1">
    <label for="sample">選択してください</label>
    </div>
    <div class="col-auto my-1">
    <select class="form-control" id="sample" onchange="viewChange();">
    <option value="select1">one</option>
    <option value="select2">two</option>
    <option value="select3">three</option>
    </select>
    </div>
    <div class="col-auto my-5">
    <div id="Box1" class="my-5">
    <p>one</p>
    </div>
    <div id="Box2" class="my-5">
    <p>two</p>
    </div>
    <div id="Box3" class="my-5">
    <p>three</p>
    </div>
    </div>
    <script>
    function viewChange(){
    if(document.getElementById('sample')){
    id = document.getElementById('sample').value;
    if(id == 'select1'){
    document.getElementById('Box1').style.display = "";
    document.getElementById('Box2').style.display = "none";
    document.getElementById('Box3').style.display = "none";
    }else if(id == 'select2'){
    document.getElementById('Box1').style.display = "none";
    document.getElementById('Box2').style.display = "";
    document.getElementById('Box3').style.display = "none";
    }
    else if(id == 'select3'){
    document.getElementById('Box1').style.display = "none";
    document.getElementById('Box2').style.display = "none";
    document.getElementById('Box3').style.display = "";
    }
    }

    window.onload = viewChange;
    }
    </script>
    javascript全文を書いていただければ幸いです。
マルチポストを報告
違反を報告
引用返信 削除キー/
■35417 / ResNo.1)  Re[1]: style.displayだと効率悪いから違うやり方をしたいです。
□投稿者/ 魔界の仮面弁士 大御所(1544回)-(2023/05/11(Thu) 13:27:36)
  • アイコン2023/05/11(Thu) 13:31:57 編集(投稿者)

    No35416に返信(えっぴーさんの記事)
    > style.displayだと効率悪いから違うやり方をしたいです。
    そもそもなぜ、style を直接操作したいのでしょうか。
    基本的には css クラスで操作する設計にするべきだと思いますが…。
    https://ja.javascript.info/styles-and-classes

    CSS や JS 向けのフレームワークを使うにせよ使わないにせよ、
    広域的操作であれば class / className で調整した方が便利かと。


    > セレクトごとに、
    > document.getElementById('Box1').style.display = "";と、
    > document.getElementById('Box1').style.display = "none";
    > を書かなければならないからです。
    短縮表記だけの話なら、
     const $id = document.getElementById;
    みたいにエイリアスを用意して、
     $id('box1').style.display = 'none';
    などとは書けますね。

    あるいは CSSStyleDeclaration オブジェクト自体をキャッシュした
     let boxStyle = document.getElementById('Box1').style;
    などを用意しておけば、以降は
     boxStyle.display = 'none';
    と書くことはできますが…いずれにせよ、style は積極的に使うべきでなく、
    基本的には CSS クラスで制御するようにし、それで処理しきれない要素に
    限定して、style の直接操作を試みた方が良いでしょう。


    > しかし、document.getElementById自体1つしか書けないのです。
    document.querySelector
    document.querySelectorAll
    を使わないのは何故ですか? (CSS セレクター指定)
    https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors
違反を報告
引用返信 削除キー/
■35418 / ResNo.2)  Re[2]: style.displayだと効率悪いから違うやり方をしたいです。
□投稿者/ えっぴー 一般人(2回)-(2023/05/11(Thu) 14:00:44)
  • アイコン全文と言いました。
    僕は天才のように、断片的な情報から組み合わせて、完成したものを作る能力はございません。
違反を報告
引用返信 削除キー/
■35419 / ResNo.3)  Re[3]: style.displayだと効率悪いから違うやり方をしたいです。
□投稿者/ 福ちゃん 一般人(3回)-(2023/05/11(Thu) 17:34:17)
  • アイコンもういいです。
    あなたを役立たずとみなします。
解決み!
違反を報告
引用返信 削除キー/
■35420 / ResNo.4)  Re[4]: style.displayだと効率悪いから違うやり方をしたいです。
□投稿者/ 魔界の仮面弁士 大御所(1545回)-(2023/05/11(Thu) 18:32:47)
  • アイコン
    No35418に返信(えっぴーさんの記事)
    > 全文と言いました。
    https://codepen.io/benshi-orator/pen/poxVZbg


    No35419に返信(福ちゃんさんの記事)
    > もういいです。
    解決済みチェックの「スレッドを閉じる目的ではチェックしないでください!」
    と書かれた赤文字を読まれましたか?

    掲示板の投稿ルールを守って利用してください。
    https://dobon.net/vb/bbs/index.html

違反を報告
引用返信 削除キー/
■35421 / ResNo.5)  【注意】ルールをお守りください
□投稿者/ 管理人 一般人(1回)-(2023/05/12(Fri) 03:16:45)
  • アイコンえっぴーさんの今までのご投稿(別のお名前でのご投稿もありますが)を拝見させていただくと、明らかに書き込みのルールが守られていません。

    書き込みのルールについて
    https://dobon.net/vb/bbs/index.html

    しかし、それ以前の問題として、No35419 のご投稿は、人を侮辱した内容であり、あまりにひどいです。よって、大変申し訳ありませんが、えっぴーさんのご投稿を一時的に禁止させていただきます。

    今後はルールをお守りいただけると約束していただけるのであれば、投稿禁止を解除させていただきますので、その場合は管理人へご連絡ください。

    なお、さらなる迷惑行為が行われた場合は、さらに厳しい対応をとらせていただくことになってしまうかもしれませんので、絶対にやめてください。

    以上です。よろしくお願いいたします。
違反を報告
引用返信 削除キー/



スレッド内ページ移動 / << 0 >>

このスレッドに書きこむ

Mode/  Pass/


- Child Tree -