代码之家 › 专栏 › 技术社区 › Dennis

jquery中两级以上时的下一个元素

tabs html jquery javascript

Dennis · 技术社区 · 7 年前

我试图在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" ,DIV与 data-target="overview" 必须显示。当我单击Features时,必须显示Features目标。

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

我的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');    
});

2 回复 | 直到 7 年前

Mamun 7 年前

你可以使用 .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>

CertainPerformance 7 年前

使用 .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_uu content”>
<h3 class=“feature_uu content_uuu toptitle”>
&?php the_sub_field('feature_top_title');?gt;
/lt/H3>
<h2 class=“feature_uu content_uuu title”>
&?php the_sub_field('feature_title');?gt;
/lt/H2 & gt;


<div class=“feature_uu content_uuu tabs”>
<span class=“feature_u content_uu tabs_uu selector”data selector=“overview”>概述</span>
<span class=“feature_uu content_uu tabs_uu selector”data selector=“features”>功能</span>
&L/DIV & GT;

<div class=“feature_uu content_uuu overview”data target=“overview”>
功能概述
&L/DIV & GT;
<div class=“feature_uu content_uuu features”data target=“features”>
此处显示功能滑块
&L/DIV & GT;
&L/DIV & GT;

或者,使用新的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>