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的更多信息。

Answer 2

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

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

jQuery .click用于具有相同类的多个元素

2 个答案: