Home>

I'm making an HP with WordPress. jQuery doesn't work.

I am making a tab panel. When I press the tab, the class is attached, but after that I can not remove the class with remove
Error message

### Applicable source code
                                                news                                                                            all                        Notice                        Blog                                                                                                          <?php
                                    if(have_posts()): while(have_posts()):the_post();
                                ?>                                                                        <?php echo get_the_date();?>                                                                                                                    <p>Blog</p>                                                                                  ">                                        <?php the_title();?>                                        <?php endwhile;?>                                        <?php endif;?>                                        <?php wp_reset_postdata();?>                                                                                                    <?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();?>                                                        <?php echo get_the_date();?>                                                                                            <p>Notice</p>                                                                  ">                                <?php the_title();?>                                <?php endwhile;?>                                <?php endif;?>                                <?php wp_reset_postdata();?>                                                                <?php
                            $posts = new WP_Query(
                                array(
                                    'post_type' =>'post',
                                    'posts_per_page' =>3
                                    )
                                );
                                if (have_posts() ): while ($posts->have_posts() ): $posts->the_post();
                            ?>                                                <?php echo get_the_date();?>                                                                                <p>Blog</p>                                                          ">                                <?php the_title();?>                                <?php endwhile;?>                                <?php endif;?>                                <?php wp_reset_postdata();?>                                                    
jQuery(function($){
    $('.tab').on('click',function(){var idx=$('.tab').index(this);
      $(this).addClass('is-active').siblings('.tab').removeClass('is-active');
      $(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show');
      $('.panel').eq(idx).addClass('is-show');
    });
  });
.tab-group{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-end;
}
.tab{
  width: 130px;
  background: #dbedf0;/* tab color */
  border-radius: 10px 10px 0 0;
  color: black;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  padding: 12px 15px 12px;
  text-align: center;
  transition: 1s;
  vertical-align: bottom;
}
.panel{
  display:none;
}
.panel.is-show{
  display:block;
}
.tab.is-active{
  transition: 1s;
  opacity: 0.6;
  padding-bottom: 20px;
}
What I tried

$(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show');This code doesn't work.
If i erase this code and try it, other code will respond
This is the result of debugging.

Supplemental information (FW/tool ​​version, etc.)

Please provide more detailed information here.

  • Answer # 1

    Well, there are two oddities.

    The latter two panel classes are not included in the panel-group class.

    The panel-group class is not a sibling element of the tab-group class.

    (About 1) As you can see by displaying the HTML file presented by the text editor that automatically formats the HTML, only the first panel is included in the panel-group (div element of class, omitted below). so,The other two penels are on the outside.. Therefore, when you find() a panel from panel-group and do removeClass, the two back panels will be out of scope.

    (About 2) Looking at the HTML file,tab-wrap surrounds tab-group, Panel-group class is a sibling element of tab-wrap class. Therefore,closest('.tab-group').next('.panel-group')Then, panel-group cannot be found. As below,closest('.tab-wrap').next('.panel-group')You will need to change it to or remove the tag-wrap from the HTML file.

    -$(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show');
    +$(this).closest('.tab-wrap').next('.panel-group').find('.panel').removeClass('is-show');

  • Answer # 2

    Method chains are convenient, but it's better to check them one by one rather than suddenly.

    console.log( $(this))
    console.log( $(this).closest('.tab-group'))
    console.log( $(this).closest('.tab-group').next('.panel-group'))
    console.log( $(this).closest('.tab-group').next('.panel-group').find('.panel'))

    I think there is a problem that will naturally appear if you see how far it goes.