JQuery ToggleClass使用索引属性

JQuery ToggleClass using index attribute

本文关键字：索引 属性 ToggleClass JQuery      更新时间：2023-09-26

我有一个切换功能实现在我的页面。我想在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 code 

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

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

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

话虽这么说，如果你想选择下一个标签的兄弟点击span你可以使用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");
});
相关文章：