在jQuery中达到两个级别时的下一个元素

Question

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

我的HTML代码如下：

% Turn each group new into a unique number:
t1 = cumsum(logical([1 diff(x)]));
%  x = [1 1 1 1 1 2 2 2 3 4 4 6 6 6 6 1 1 1];
% t1 = [1 1 1 1 1 2 2 2 3 4 4 5 5 5 5 6 6 6];

% Apply cumsum separately to each group:
t2 = cell2mat( splitapply(@(v){cumsum(v)},x,t1) );
% t1 = [1 1 1 1 1 2 2 2 3 4 4 5  5  5  5 6 6 6];
% t2 = [1 2 3 4 5 2 4 6 3 4 8 6 12 18 24 1 2 3];

% Finally, divide by x to get the increasing values:
y = t2 ./ x;
%  x = [1 1 1 1 1 2 2 2 3 4 4 6  6  6  6 1 1 1];
% t2 = [1 2 3 4 5 2 4 6 3 4 8 6 12 18 24 1 2 3];

当我单击带有 <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"的div。当我单击功能时，必须显示功能目标。

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

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

data-target="overview"

Answer 1

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

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() / .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>