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

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

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

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

Q&A

解決済

1回答

118閲覧

JavaScript ボタンクリックで、同じクラス名の複数要素に別のクラス名を付与したい

ai-f

総合スコア1

JavaScript

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

0グッド

0クリップ

投稿2024/03/05 07:33

編集2024/03/05 17:02

実現したいこと

<div class="movie-button">をクリックしたら、すべての<div class="slider-item">に別のクラス名(.click)を付与したい。

発生している問題・分からないこと

<div class="movie-button">をクリックしたら全ての<div class="slider-item">に別のクラス名「.click」を付与するJavascriptを書きたいのですが、書き方に苦戦しております。

記載のJavascriptだと、3つの<div class="slider-item">のうち一番上のみクラス名(.click)が付与されます。全ての<div class="slider-item">にクラス名(.click)を付与したい場合、どう書けばよろしいでしょうか。

調べつつ解読しながら色々と試してみたのですが、思うような動きにならず質問させていただきました。知識不足で恐縮ですが、よろしくお願いいたします。

該当のソースコード

HTML

1<div id="movie-button"> 2 <div class="movie-button"> 3 <span class="movie-button-pause"><img src="img/button_2.png" loading="lazy"></span> 4 <span class="movie-button-play"><img src="img/button_1.png" loading="lazy"></span> 5 </div> 6</div> 7<div class="slider"> 8 <div class="slider-item"></div> 9 <div class="slider-item"></div> 10 <div class="slider-item"></div> 11</div> 12

JavaScript

1const slideritem = document.querySelector(".slider-item"); 2const moviebutton = document.querySelector(".movie-button"); 3 4moviebutton.addEventListener("click", () => { 5slideritem.classList.toggle("click"); 6});

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

teratail、Google等で検索して同じように書いてみましたが、クラス名(.click)の付与ができませんでした。

補足

特になし

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

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

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

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

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

yambejp

2024/03/05 07:43

".movie-button"はHTML内で宣言されてないのでヒットしないと思います
ai-f

2024/03/05 07:57

コメントありがとうございます。質問内容につきまして修正いたしました。ご確認のほど何卒よろしくお願いいたします。
guest

回答1

0

ベストアンサー

付与するのでしょうか?トグルするのでしょうか?

javascript

1document.addEventListener('click',({target})=>{ 2 if(target.closest('.button')){ 3 document.querySelectorAll('div.slider-item').forEach(x=>x.classList.add('click')); 4 } 5});

トグルする場合はadd→toggleで

javascript

1document.addEventListener('click',({target})=>{ 2 if(target.closest('.button')){ 3 document.querySelectorAll('div.slider-item').forEach(x=>x.classList.toggle('click')); 4 } 5});

投稿2024/03/05 07:42

編集2024/03/05 07:55
yambejp

総合スコア114721

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

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

ai-f

2024/03/05 07:49

ご回答ありがとうございます。 分かりずらく失礼いたしました。 トグルしたいです。 <div class="button">をクリックした際に、すべての<div class="slider-item">に別のクラス名「click」を付与、再度クリックすると「click」クラス削除、を繰り返しできるようにしたいです。
yambejp

2024/03/05 07:55

追記しておきましたがaddをtoggleにすれば大丈夫です
ai-f

2024/03/05 08:02

回答ありがとうございます。試したところ問題が解決いたしました。 ベストアンサーに選ばせていただきました。この度は迅速なご回答、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問