質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

504閲覧

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

_Lucia

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/03/17 04:59

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

html

1 <button data-id="typeA" class="typeA">Aを表示するボタン</button> 2 <button data-id="typeB" class="typeB">Bを表示するボタン</button> 3 <button data-id="typeC" class="typeC">Cを表示するボタン</button> 4 5 <div class="box" id="typeA" >Aが表示された</div> 6 <div class="box" id="typeB" style="display: none;">Bが表示された</div> 7 <div class="box" id="typeC" style="display: none;">Cが表示された</div>

JavaScript

1 document.addEventListener('click', e=>{ 2 const t=e.target; 3 if(t.matches('[data-id]')){ //クリックしたボタンにdata-id属性があった場合、 4 5 var v1=document.querySelector(`#${t.dataset.id}`); //クリックされたデータ属性と同じ名前のIDを取得し、 6 v1.style.display="block"; //その要素を表示する 7 8 var v2=document.querySelectorAll('.box:not(v1)'); //「上記(v1)で取得した要素以外」でclass=boxが付いている要素を全て取得して、 9 v2.style.display="none"; //その要素を非表示にする 10 11 } 12 });

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2023/03/17 05:01

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

回答2

0

js

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

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

js

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

投稿2023/03/17 05:06

int32_t

総合スコア20845

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Lucia

2023/03/17 05:39

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

0

ベストアンサー

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

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

javascript

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

投稿2023/03/17 05:09

編集2023/03/17 05:11
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Lucia

2023/03/17 05:48

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問