Question

所以在这样的html结构中：

    <a class="member-main">
      <!-- other divs and html elements -->
    </a>

    <div class="hidden-group-item">
      <!-- other divs and html elements -->
    </div>

我想将click事件绑定到类.member-main的html元素，以便显示隐藏的元素.hidden-group-item。

页面中有很多元素是成对重复的，所以我还想在其.hidden-group-item

下面仅显示.member-main。

我的目标是使用下面的函数，this previous question帮助

$('body').on('click', '.member-main', function() {
    $(this).next('.hidden-group-item')[0].toggleClass('hide')
});

我可以通过this关键字获取关联的元素（如果我控制台记录它），但我似乎无法抓住那个允许我遍历到hidden-group-item的节点。

this如何在这种情况下工作以及实现这一目标的最有效方法是什么？

Answer 1

...[0]返回一个nodeElement而不是一个具有函数toggleClass的jQuery对象。试试这个：

$('body').on('click', '.member-main', function() {
    $(this).next('.hidden-group-item') // next is already returning one item so no need to try to access the first 
           .toggleClass('hide')
});

Answer 2

这可以按预期工作

有关.next()方法的文档说明如下：

获取该组中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个选择器兄弟姐妹只有匹配那个选择器。

因为你有onClick处理程序并且你选择当前点击的元素为$(this)，所以匹配的元素集只是你点击的那个，因此{{ 1}}调用得到它下面的next()。

<强>示例

＆＃13;

.hidden-group-item

＆＃13;

$('body').on('click', '.member-main', function() {
  $(this).next('.hidden-group-item').toggleClass('hide')
});

＆＃13;

.hide {
  display: none;
}

＆＃13;

JSFiddle

遍历下一个元素，而不是立即和不同类型

2 个答案: