前提
参考URLにあるようなクリックでセクションの表示・非表示を切り替える機能を実装しました。
https://agohack.com/show-hide-toggle-on-click-with-jquery/
実現したいこと
参考URL内の「2. ボタンで切り替え」部分の物を実装しました。正常に動作しています。
切り替えのボタンを2つ(同一リンク先)設置したいのですが、セレクタがID指定となっているので同ページ内で2回使用できません。
よって、ボタン内切り替えのトリガーをclassセレクタにしたいと考えています。
発生している問題・エラーメッセージ
class指定に変更しましたがうまく動作しません。
該当のソースコード
html
1<div class="service-contents sec1"> 2 <p>サンプルテキスト1</p> 3 <ul class="navi"> 4 <li class="prev"><button class='secList sec3'>PREV</button></li> 5 <li class="next"><button class='secList sec2'>NEXT</button></li> 6 </ul> 7</div> 8 9<div class="service-contents sec2"> 10 <p>サンプルテキスト2</p> 11 <ul class="navi"> 12 <li class="prev"><button class='secList sec1'>PREV</button></li> 13 <li class="next"><button class='secList sec3'>NEXT</button></li> 14 </ul> 15</div> 16 17<div class="service-contents sec3"> 18 <p>サンプルテキスト3</p> 19 <ul class="navi"> 20 <li class="prev"><button class='secList sec2'>PREV</button></li> 21 <li class="next"><button class='secList sec1'>NEXT</button></li> 22 </ul> 23</div> 24 25 26| 27| 28| 29 30<ul> 31 <li><button class='secList sec1'>サンプル1を表示</button></li> 32 <li><button class='secList sec2'>サンプル2を表示</button></li> 33 <li><button class='secList sec3'>サンプル3を表示</button></li> 34</ul>
jQuery
1jQuery(function($){ 2 $('.service-contents').hide(); 3 4 $('.secList').on('click',function(){ 5 $('.service-contents').not($('.'+$(this).attr('class'))).hide(500); 6 $('.'+$(this).attr('class')).show(500); 7 }); 8});
よろしくお願い致します。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/09/26 16:48
2022/09/26 16:49
2022/09/26 17:57