jQuery .click 获取具有相同类的多个元素

Question

我有一小段 jQuery，需要一些帮助。这是我所拥有的:

jQuery:

jQuery(".disableUser").click(function() {
    jQuery(".enableUser").show()
    jQuery(".disableUser").hide();
});

jQuery(".enableUser").click(function() {
    jQuery(".disableUser").show()
    jQuery(".enableUser").hide();
});

HTML:

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td><span class="disableUser">Disable this user</span><span class="enableUser">Enable this user</span></td>
</tr>

.enableUser 默认设置为 display:none。

如您所见，它只是隐藏或显示一个元素。我的问题是表中有行，每行都有相同的两个元素。当我单击一行元素时，它会隐藏或显示该行的所有元素。我只希望它影响我单击的特定元素，而不是影响具有同一类的所有元素。我已经尝试过这里找到的信息:http://css-tricks.com/snippets/jquery/click-once-and-unbind/ ，但我不确定我是否理解它或正确使用它。

Answer 1

您可能想要查找当前行的 .enableUser 和 .disableUser。 this 将引用单击的元素，从那里您可以遍历 DOM 并找到正确的元素:

jQuery(".disableUser").click(function() {
    jQuery(this).hide().closest("tr").find(".enableUser").show();
});

查看 .closest 的文档和 .find了解更多信息。您可能还想阅读有关 event handling 的更多信息.