前提・実現したいこと
クリックした要素(例えば001要素)に対してactive
クラスを追加し、
他の要素(例えば002要素)をクリックするとその要素に対してactive
クラスを追加し、
001要素からはactive
クラスが削除される。
ここまで上手く行きました。
発生している問題・エラーメッセージ
上記の前提は、div
の共通のlist
クラスをセレクタにして、
active
クラスを一度削除し、それからクリックした$(this)
に対して、
active
クラスを追加して実現できました。
しかし一つ問題が起き、active
クラスがある要素に対してもう一度クリックすると、
active
クラスが削除されません。
理由は自分なりに考えると、list.removeClass('active')
の後に、$(this).addClass('active')
を実行しているためだと思いますが、この処理の順序を変えても、上手く行きません。
前提・実現したいこと
を維持しつつ、active
クラスを持つ要素に対してクリックするとクラスを削除するのはどうすれば良いでしょうか。
active
クラスは文字を赤色にするのみのクラスです。
現状の動作を確認しやすくするために、jsfiddleにコードをアップしていますので、
ご確認ください。(リンク先の上部にあるSaveはこちらのコードには影響はないので、ご活用くださいませ。)
https://jsfiddle.net/ululami/x8smfwbu/10/
よろしくお願いいたします。
該当のソースコード
javascript
1$(function() { 2 const list = $('.list'); 3 list.on('click', function() { 4 list.removeClass('active'); 5 $(this).addClass('active'); 6 }); 7});
html
1<div class="box"> 2 <div class="list"> 3 001 4 </div> 5 <div class="list"> 6 002 7 </div> 8 <div class="list"> 9 003 10 </div> 11</div>
css
1* { 2 margin: 0; 3 padding: 0; 4} 5 6html, 7body, 8.box { 9 height: 100%; 10} 11 12.box { 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 flex-direction: column; 17} 18 19.list { 20 font-size: 20px; 21 font-weight: bold; 22} 23 24.list:not(:last-child) { 25 margin-bottom: 10px; 26} 27 28.active { 29 color: red; 30}
補足情報(FW/ツールのバージョンなど)
jQuery 3.3.1
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。