data属性を使用してタブの切り替えは出来ないでしょうか

Question

今のコードですとボタンを押すたびに要素が表示されたままになりますので、クリックで呼び出される要素以外は消えて欲しいです。Aは最初から表示されている設定です。

        <button  data-id="typeA"　class="typeA">Aを表示するボタン</button>
        <button  data-id="typeB"　class="typeB">Bを表示するボタン</button>
        <button  data-id="typeC"　class="typeC">Cを表示するボタン</button>

        <div class="box" id="typeA" >Aが表示された</div>
        <div class="box" id="typeB" style="display: none;">Bが表示された</div>
        <div class="box" id="typeC" style="display: none;">Cが表示された</div>

    document.addEventListener('click', e=>{
    const t=e.target;
    if(t.matches('[data-id]')){   //クリックしたボタンにdata-id属性があった場合、

      var v1=document.querySelector(`#${t.dataset.id}`);   //クリックされたデータ属性と同じ名前のIDを取得し、
      v1.style.display="block";  //その要素を表示する 
      
      var v2=document.querySelectorAll('.box:not(v1)');   //「上記（v1）で取得した要素以外」でclass=boxが付いている要素を全て取得して、
      v2.style.display="none";   //その要素を非表示にする
    
    }
  });

理屈上、これでタブの切り替えのようなことが出来ると思ったのですが8行目でエラーが出ていてv2の定義が間違っているそうです。

「v1で取得した要素以外でclass=boxが付いている要素を全て取得」を正しく定義するにはどのような方法がありますか？

Comments

[m.ts10806]

どのようなエラーでしょうか。
コピペで提示してください。

Answer 1

var v2=document.querySelectorAll('.box:not(v1)');   //「上記（v1）で取得した要素以外」でclass=boxが付いている要素を全て取得して、
v2.style.display="none";   //その要素を非表示にする

:not() の中に書けるのはセレクタです。変数名ではありません。また、querySelectorAll() の返り値は集合なので、ループを回す必要があります。以下のような感じでしょうか。

// いったんすべての .box を非表示にして、
for (let v2 of document.querySelectorAll('.box'))
  v2.style.display = "none";
// クリックされたものだけ表示
var v1 = document.querySelector(`#${t.dataset.id}`);
v1.style.display = "block";

Comments

[_L9u7c4i0a]

要素を複数取得した場合はループせねばならなかったのですね。
ありがとうございます！

Answer 2

理屈上、これでタブの切り替えのようなことが出来ると思ったのですが8行目でエラーが出ていてv2の定義が間違っているそうです。

v1が文字列変数としてではなく、ただの文字列として入ってしまっていますので、それが原因かと。
また、querySelectorAllは、NodeListを返すので、
jQueryのような使い方はできません。

// テンプレートリテラルならこう
var v2=document.querySelectorAll(`.box:not(#${t.dataset.id})`);
// NodeListをforEachで走査する
v2.forEach(e => {
  e.style.display="none";
});

Comments

[_L9u7c4i0a]

not:(v1)は自分でもおかしいと思いました、、、
回答ありがとうございます！