javascript - JQuery ToggleClass 使用索引属性

Question

我有一个要在我的页面中实现的切换功能。我想在 span 元素旁边显示一个标签。但问题是我只需要触发相应的标签

这是我的 HTML 代码

    <div>
        <span class="header1">Header</span>
        <label class="dtl1 hide  ">Details</label>
        <span class="header2">Header</span>
        <label class="dtl2 hide">Details</label>
    </div>

Javascript 代码

    $('span').click(function() {
      var selIndex =  $("span").index(event.currentTarget);
      $('label').toggleClass("hide");
    });

我们是否有类似 next().toggleClass() 的东西，或者使用两个元素的索引并应用 toggleClass

Answer 1

您的代码中有几个错误。您的回调不接受事件对象。所以您使用的是全局事件对象(在某些浏览器中)而不是当前事件，这不可靠。您还缺少用于 toggleClass 调用的 . 和用于关闭 click 方法的 )。

话虽这么说，如果你想选择点击跨度的下一个标签兄弟，你可以使用 next 方法:

$('span').click(function(event) {
   // event.currentTarget is typically equal to `this` in this context
   $(this).next('label').toggleClass("hide");
});

如果要使用index方法，还应该使用eq方法:

$('span').click(function(event) {
    var index = $("span").index(event.currentTarget);
    $('label').eq(index).toggleClass("hide");
});