Q&A
なるほどやって見ます。
前提・実現したいこと
ワードプレスでHPを作っています。jQueryが機能しません。
発生している問題・エラーメッセージ
タブパネルを作っています。タブを押した時クラスはつくのですが、その後クラスをremoveでなくすことができません
エラーメッセージ
### 該当のソースコード <div id="main-home"> <div id="NEWS"> <div class="NEWS-title"> <h1>news</h1> </div> <div class="tab-wrap"> <div class="tab-group"> <div class="tab is-active">全て</div> <div class="tab">お知らせ</div> <div class="tab">ブログ</div> </div> </div> <div class="panel-group"> <div class="panel is-show"> <?php if(have_posts()): while(have_posts()):the_post(); ?> <div class="left-post-date"> <?php echo get_the_date(); ?> </div> <div class="left-post-item"> <p>ブログ</p> </div> <a href="<?php the_permalink(); ?>" class="left-post-title"> <?php the_title(); ?></a> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_postdata(); ?> </div> </div> <div class="panel"> <?php $news_query = new WP_Query( array( 'post_type' => 'news', 'posts_per_page' => 3 ) ); ?> <?php if ( $news_query->have_posts() ) : ?> <?php while ( $news_query->have_posts() ) : ?> <?php $news_query->the_post(); ?> <div class="center-news-date"> <?php echo get_the_date(); ?> </div> <div class="center-news-item"> <p>お知らせ</p> </div> <a href="<?php the_permalink(); ?>" class="center-news-title"> <?php the_title(); ?></a> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_postdata(); ?> </div> <div class="panel"> <?php $posts = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => 3 ) ); if ( have_posts() ) : while ( $posts->have_posts() ) : $posts->the_post(); ?> <div class="left-news-date"> <?php echo get_the_date(); ?> </div> <div class="left-news-item"> <p>ブログ</p> </div> <a href="<?php the_permalink(); ?>" class="left-news-title"> <?php the_title(); ?></a> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_postdata(); ?> </div> </div> </div> </div>
js
1jQuery(function($){ 2 $('.tab').on('click',function(){ 3 var idx=$('.tab').index(this); 4 $(this).addClass('is-active').siblings('.tab').removeClass('is-active'); 5 $(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show'); 6 $('.panel').eq(idx).addClass('is-show'); 7 }); 8 });
css
1.tab-group{ 2 display: flex; 3 justify-content: space-between; 4 flex-wrap: wrap; 5 align-items: flex-end; 6} 7.tab{ 8 width: 130px; 9 background: #dbedf0; /* タブのカラー */ 10 border-radius: 10px 10px 0 0; 11 color: black; 12 cursor: pointer; 13 display: inline-block; 14 font-size: 16px; 15 padding: 12px 15px 12px; 16 text-align: center; 17 transition: 1s; 18 vertical-align: bottom; 19} 20.panel{ 21 display:none; 22} 23.panel.is-show{ 24 display:block; 25} 26.tab.is-active{ 27 transition: 1s; 28 opacity: 0.6; 29 padding-bottom: 20px; 30}
試したこと
$(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show');このコードが機能しない。
このコードを消して、試すとそれ以外のコードは反応します
デバックの結果です。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
ええと、2箇所おかしな点があります。
- panel-groupクラスに、後半2つのpanelクラスが含まれていない。
- panel-groupクラスは、tab-groupクラスの兄弟要素ではない。
(1について) HTMLを自動整形してくれるテキストエディターで提示されたHTMLファイルを表示させるとわかるのですが、panel-group(クラスのdiv要素、以下略)に含まれるのは、最初のpanelだけで、残りの2つのpenelはその外側にあります。このため、panel-groupからpanelをfind()してremoveClassする際に、後ろの2つのpanelは対象外になってしまいます。
(2について) HTMLファイルを見ると、tab-groupをtab-wrapが囲んでおり、panel-groupクラスはtab-wrapクラスの兄弟要素です。ですから、closest('.tab-group').next('.panel-group')では、panel-groupは見つかりません。以下のように、closest('.tab-wrap').next('.panel-group')に変更するか、HTMLファイルからtag-wrapを取り除くかする必要があります。
diff
1-$(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show'); 2+$(this).closest('.tab-wrap').next('.panel-group').find('.panel').removeClass('is-show');
投稿2020/09/05 02:23
総合スコア11990
0
メソッドチェーンは便利ですが、いきなり組むより1つずつ確認した方が良いです。
js
1console.log( $(this)) 2console.log( $(this).closest('.tab-group')) 3console.log( $(this).closest('.tab-group').next('.panel-group')) 4console.log( $(this).closest('.tab-group').next('.panel-group').find('.panel'))
これでどこまで通ってるか見れば自ずと見えてくる問題もあるかと思います。
投稿2020/09/05 01:02
総合スコア80850
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/09/05 02:45