Question

.selected {
    background-color: blue;
}
</style>

<table id="tb">
    <tr class="b"><td>One</td></tr>
    <tr class="b"><td>Two</td></tr>
    <tr class="b"><td>Three</td></tr>
</table>

<script>
        $("#tb tr.b").not(".selected").click(function () {
            $(this).toggleClass("selected");
        });
</script>

<tr>元素最初没有类＃34; .selected＆＃34;但点击后会添加到它：

<tr class="b selected"><td>Two</td></tr>

现在;点击的行有类＆＃34; .selected＆＃34 ;;所以它不能与这个jQuery选择器$("#tb tr.b").not(".selected")匹配，因为它排除那些类值为＃34; .selected＆＃34;。但令人惊讶的是它仍然匹配!!。

一旦有了＆＃34; .selected＆＃34;我需要排除该行。补充说，怎么样？

Answer 1

选择器在您执行时匹配。绑定事件时，没有任何元素具有该类，并且稍后将类添加到它们中并不会更改绑定。

要根据类使事件绑定发生更改，可以使用委托事件，以便在事件发生时评估选择器：

$("#tb").on("click", "tr.b:not(.selected)", function () {
  $(this).toggleClass("selected");
});

Answer 2

将侦听器与click绑定后，每次都不会重新检查匹配元素$("#tb tr.b").not(".selected")的集合。您绑定到元素，而不是选择器匹配。

如果您需要将它们设为“可选”一次，您可以简化所有这些：

$("#tb tr.b").click(function () {
  $(this).addClass("selected");
});

毕竟，您需要制作的元素不是.selected .selected，而是相反，不是吗？

Answer 3

当您运行$("#tb tr.b").not(".selected").click...时，您绑定了目前尚未选中的回拨点击回调。

您应该在处理点击时检查课程

$("#tb tr.b").click(function () {
  if (!$(this).hasClass('selected')) {
    $(this).toggleClass("selected");
  }
});

jQuery：not（＆＃34; .selected＆＃34;）排除一个没有按预期工作的类！如何解决？

3 个答案: