0

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

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";
  }
});

3 件の回答 3

1

document.getElementById('buttons').addEventListener('click', function (e) {
    if (e.target.dataset.trend == null) return;
    document.getElementById(e.target.dataset.trend).classList.toggle('hide');
});
.hide {
    visibility: hidden;
}
<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>

こんな感じでしょうか。

1

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

[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;
}
<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>


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

[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;
}
<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>

-1

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

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

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";
};
1
  • 質問ではクリックした要素と表示制御する要素が異なるようです。しかしこの回答では、thisを表示制御するためそのままでは使えません。「ヒントとして」とのことですが、ちょっとヒントにしては遠すぎる気がします。
    – sayuri
    Commented 2022年7月18日 20:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。