当jQuery中的两个级别时的下一个元素

Question

我正在尝试在jQuery中创建一个选项卡功能。

我的HTML代码如下所示：

    <div class="feature__content">
            <h3 class="feature__content__toptitle"><?php the_sub_field('feature_top_title'); ?></h3>
            <h2 class="feature__content__title"><?php the_sub_field('feature_title'); ?></h2>


            <div class="feature__content__tabs">
                <span class="feature__content__tabs__selector" data-selector="overview">Overview</span>
                <span class="feature__content__tabs__selector" data-selector="features">Features</span>
            </div>

            <div class="feature__content__target" data-target="overview">
                <?php the_sub_field('feature_overview'); ?>
            </div>
            <div class="feature__content__target" data-target="features">
                features slider here
            </div>
    </div>

当我使用data-selector="overview"单击span时，必须显示带有data-target="overview"的div。 当我点击功能时，必须显示功能目标。

老实说，我不知道如何进入几个级别，然后选择具有数据属性的特定。

我的jQuery代码看起来像这样：

jQuery('.feature__content__target:last-child()').hide();

jQuery('.feature__content__tabs__selector').on('click', function(e) {
    var selector = jQuery(this).data('selector');
    var targets = jQuery('feature__content__target');
    var container = jQuery(this).closest('.feature__content');
    var target = container.find('div[data-target="' + selector + '"]');

    console.log(selector);

    targets.removeClass('show');
    target.addClass('show');    
});

Answer 1

使用.closest导航到具有.feature__content类的目标的最近祖先，然后使用匹配的data-target .find元素：

 jQuery('.feature__content__tabs__selector').on('click', function(e) { var selector = jQuery(this).data('selector'); var container = $(this).closest('.feature__content'); var target = container.find('div[data-target="' + selector + '"]') target.toggle(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="feature__content"> <h3 class="feature__content__toptitle"> <?php the_sub_field('feature_top_title'); ?> </h3> <h2 class="feature__content__title"> <?php the_sub_field('feature_title'); ?> </h2> <div class="feature__content__tabs"> <span class="feature__content__tabs__selector" data-selector="overview">Overview</span> <span class="feature__content__tabs__selector" data-selector="features">Features</span> </div> <div class="feature__content__overview" data-target="overview"> feature overview </div> <div class="feature__content__features" data-target="features"> features slider here </div> </div> 

或者，当然，你可以调用.parent()两次而不是使用closest ：

 jQuery('.feature__content__tabs__selector').on('click', function(e) { var selector = jQuery(this).data('selector'); var container = $(this).parent().parent(); var target = container.find('div[data-target="' + selector + '"]') target.toggle(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="feature__content"> <h3 class="feature__content__toptitle"> <?php the_sub_field('feature_top_title'); ?> </h3> <h2 class="feature__content__title"> <?php the_sub_field('feature_title'); ?> </h2> <div class="feature__content__tabs"> <span class="feature__content__tabs__selector" data-selector="overview">Overview</span> <span class="feature__content__tabs__selector" data-selector="features">Features</span> </div> <div class="feature__content__overview" data-target="overview"> feature overview </div> <div class="feature__content__features" data-target="features"> features slider here </div> </div> 

或者，使用新的HTML，如果你想用类切换，那么只使用那些类，而不是.show() / .show() .hide()用这些方法切换的元素不会受到构成元素的类的影响是否可见）。

请注意，您需要使用. 在类之前，表示您要搜索具有该类的元素。 （你的var targets = jQuery('feature__content__target');将查找标签名为 feature__content__target元素

 jQuery('.feature__content__tabs__selector').on('click', function(e) { var selector = jQuery(this).data('selector'); var targets = jQuery('.feature__content__target'); var container = jQuery(this).closest('.feature__content'); var target = container.find('div[data-target="' + selector + '"]'); console.log(selector); targets.removeClass('show'); target.addClass('show'); }); 

 .feature__content__target { display: none; } .show { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="feature__content"> <h3 class="feature__content__toptitle"> <?php the_sub_field('feature_top_title'); ?> </h3> <h2 class="feature__content__title"> <?php the_sub_field('feature_title'); ?> </h2> <div class="feature__content__tabs"> <span class="feature__content__tabs__selector" data-selector="overview">Overview</span> <span class="feature__content__tabs__selector" data-selector="features">Features</span> </div> <div class="feature__content__target" data-target="overview"> feature overview here </div> <div class="feature__content__target" data-target="features"> features slider here </div> </div> 

Answer 2

你可以使用.closest()

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

并find()

获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

 jQuery('.feature__content__tabs__selector').on('click', function(e){ e.preventDefault(); var selector = jQuery(this).data('selector'); jQuery(this).closest('.feature__content').find('div[data-target="'+ selector +'"]').toggle(); }); 

 [data-selector="overview"]{ color: green; } [data-selector="features"]{ color: blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="feature__content"> <h3 class="feature__content__toptitle"><?php the_sub_field('feature_top_title'); ?></h3> <h2 class="feature__content__title"><?php the_sub_field('feature_title'); ?></h2> <div class="feature__content__tabs"> <span class="feature__content__tabs__selector" data-selector="overview">Overview</span> <span class="feature__content__tabs__selector" data-selector="features">Features</span> </div> <div class="feature__content__overview" data-target="overview"> overview here </div> <div class="feature__content__features" data-target="features"> features slider here </div> </div>