Question

我的某个应用中有以下HTML

<article class="item">
       <header>
           <h1>Heading</h1>
           <div class="tasks meta">
               <a href="#" class="btn btn-tab item-tab" data-tab="items">Sub Items</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="files">Files</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="description">Notes</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="tasks">Tasks</a>
           </div>
       </header>
       <div class="item-content">
           <div class="tab-content description"></div>
           <div class="tab-content files"></div>
           <div class="tab-content tasks"></div>
           <div class="tab-content description"></div>
      </div>

      <article class="item">
       <header>
           <h1>Heading</h1>
           <div class="tasks meta">
               <a href="#" class="btn btn-tab item-tab" data-tab="items">Sub Items</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="files">Files</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="description">Notes</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="tasks">Tasks</a>
           </div>
       </header>
       <div class="item-content">
           <div class="tab-content description"></div>
           <div class="tab-content files"></div>
           <div class="tab-content tasks"></div>
           <div class="tab-content description"></div>
      </div>
   </article>

   <article class="item">
       <header>
           <h1>Heading</h1>
           <div class="tasks meta">
               <a href="#" class="btn btn-tab item-tab" data-tab="items">Sub Items</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="files">Files</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="description">Notes</a>
               <a href="#" class="btn btn-tab item-tab" data-tab="tasks">Tasks</a>
           </div>
       </header>
       <div class="item-content">
           <div class="tab-content description"></div>
           <div class="tab-content files"></div>
           <div class="tab-content tasks"></div>
           <div class="tab-content description"></div>
      </div>
   </article>

</article>

我想点击一个.btn-tab元素，然后从.active类添加.tab-content类到最近的.btn-tab，其类别与.tab-content .items相同数据项属性。

然而，我似乎能够做的就是为所有tab-content元素添加一个活动类，该元素也具有匹配的类和数据项。

**示例**

如果我点击第一个子项目链接，那么所有var clicked = $(e.currentTarget), clickedTab = clicked.data("tab"); var clickedParent = clicked.parents('.item'); clickedParent.css("border", "1px solid red"); clickedParent.find(".item-tabs").find(".tab-content." + clickedTab).addClass("active");个元素都会获得活动类，但我只想要最接近点击的元素来获取该类。

这是我的javascript，

{{1}}

Answer 1

就是这样：Se jsFiddle

jQuery(function ($) {
    $('body').on('click', '.btn-tab', function () {
        console.log($(this).closest('article.item'))
        $(this)
            .closest('article.item')
                .find('.tab-content')
                    .removeClass('active')
                    .filter('.' + $(this).data('tab'))
                        .addClass('active')
    })
})

BTW：HTML中存在嵌套错误：第一个<article>包围其余部分。我认为它应该在下一个之前关闭。

用jquery选择元素

1 个答案: