

javascriptで同じ処理をまとめるにはどのようにすればいいでしょうか。

[code]

    const but = document.getElementById("but");
    const trend = document.getElementById("trend");
    
    but.addEventListener("click", function () {
      if (trend.style.visibility == "visible") {
        // hiddenで非表示
        trend.style.visibility = "hidden";
      } else {
        // visibleで表示
        trend.style.visibility = "visible";
      }
    
    const but2 = document.getElementById("but2");
    const trend2 = document.getElementById("trend2");
    //初期表示は非表示
    trend2.style.visibility = "hidden";
    
    but2.addEventListener("click", function () {
      if (trend2.style.visibility == "visible") {
        // hiddenで非表示
        trend2.style.visibility = "hidden";
      } else {
        // visibleで表示
        trend2.style.visibility = "visible";
      }
    });
    
    const but3 = document.getElementById("but3");
    const trend3 = document.getElementById("trend3");
    //初期表示は非表示
    trend3.style.visibility = "hidden";
    
    but3.addEventListener("click", function () {
      if (trend3.style.visibility == "visible") {
        // hiddenで非表示
        trend3.style.visibility = "hidden";
      } else {
        // visibleで表示
        trend3.style.visibility = "visible";
      }
    });
    
[/code]


CC BY-SA 4.0
2022-07-14T10:53:39.327
89977
2023-05-06T01:59:32.920
2022-07-18T14:03:58.400
3060
25636
question
javascript css
javascriptで同じ処理をまとめる方法


addEventListener() で登録するイベント応答関数を個々の要素毎に個別に定義するのではなくて、共通の応答関数を指定すればいいだけに思えます。

visibility に着目して個別の要素毎にイベント処理をする以外に、  
visibility を変化させたい要素に専用のクラスを定義して、  
そのクラスに対してイベント処理を設定する方法もあります。  
下の関数は動く保証はありませんが、ヒントとして書いておきます。

[code]

    function alterVisibility() {
        let visibility = this.style.visibility;
    
        //if (visibility === "visible") then {
        //    this.style.visibility = "hidden";
        //}
        //else {
        //    this.style.visibility = "visible";
        //}
        this.style.visibility = visibility === "visible" ? "hidden" : "visible";
    };
    
[/code]


CC BY-SA 4.0
2022-07-14T17:15:14.160
89983
2022-07-14T18:33:20.877
2022-07-14T18:33:20.877
3060
43029
89977
answer

[code]

    document.getElementById('buttons').addEventListener('click', function (e) {
        if (e.target.dataset.trend == null) return;
        document.getElementById(e.target.dataset.trend).classList.toggle('hide');
    });
[/code]

[code]

    .hide {
        visibility: hidden;
    }
[/code]

[code]

    <div id="buttons">
      <button data-trend="trend1" type="button">trend1</button>
      <button data-trend="trend2" type="button">trend2</button>
      <button data-trend="trend3" type="button">trend3</button>
    </div>
    
    <div id="trend1">111</div>
    <div id="trend2" class="hide">222</div>
    <div id="trend3" class="hide">333</div>
[/code]

こんな感じでしょうか。


CC BY-SA 4.0
2022-07-18T07:22:27.507
90059
2022-07-18T07:22:27.507
53579
89977
answer


うまくやれば、`visibility`の制御はJavaScript不要のCSSだけで実現できる場合もあります、という例。

[code]

    [data-sync-with] {
      visibility: hidden;
    }
    
    #but1:checked~[data-sync-with="but1"],
    #but2:checked~[data-sync-with="but2"],
    #but3:checked~[data-sync-with="but3"] {
      visibility: visible;
    }
[/code]

[code]

    <input type="checkbox" id="but1" checked><label for="but1">trend1を表示</label>
    <input type="checkbox" id="but2"><label for="but2">trend2を表示</label>
    <input type="checkbox" id="but3"><label for="but3">trend3を表示</label>
    <div data-sync-with="but1">111</div>
    <div data-sync-with="but2">222</div>
    <div data-sync-with="but3">333</div>
[/code]

* * *

[`~`](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)を使った場合、`<input>`ボタンと`<div>`表示要素を兄弟ノードとする必要があり、なおかつボタンが先行しなければならないという制約がありました。  
[`:has()`](https://developer.mozilla.org/ja/docs/Web/CSS/:has)を使うとこれらの制約がなくなり自由に配置できます。`:has()`は多くのブラウザーが対応しており、残るFirefoxも上半期中に対応予定とのことです。  
（この例では、表示要素が先行し、ボタンを`<label>`で括っています。）

[code]

    [data-sync-with] {
      visibility: hidden;
    }
    body:has(#but1:checked) [data-sync-with="but1"],
    body:has(#but2:checked) [data-sync-with="but2"],
    body:has(#but3:checked) [data-sync-with="but3"] {
      visibility: visible;
    }
[/code]

[code]

    <div data-sync-with="but1">111</div>
    <div data-sync-with="but2">222</div>
    <div data-sync-with="but3">333</div>
    <label><input type="checkbox" id="but1" checked>trend1を表示</label>
    <label><input type="checkbox" id="but2">trend2を表示</label>
    <label><input type="checkbox" id="but3">trend3を表示</label>
[/code]


CC BY-SA 4.0
2022-07-18T09:41:17.977
90060
2023-05-06T01:59:32.920
2023-05-06T01:59:32.920
4236
4236
89977
answer