Question

我编写了两个jQuery函数，其简化版本运行如下：

$('button.class').not('.selected').on('click', function() {
    console.log('not selected');
    console.log($(this));
    $(this).addClass('selected');
}

$('button.class.selected').on('click', function() {
     console.log('selected');
     console.log($(this));
     $(this).removeClass('selected');
}

单击按钮始终会在控制台中记录以下内容：

not selected
[<button class="someClass1 someClass2 selected">Text</button>]

Web Inspector在单击按钮之前显示：

<button class="someClass1 someClass2">Text</button>

并点击后点击：

<button class="someClass1 someClass2 selected">Text</button>

再次点击它不会改变任何内容。

将addClass()切换为toggleClass()成功切换'selected'开启和关闭，但仍然始终记录not selected，这表明我的选择器正在发生一些事情。为什么即使'selected'显然是与button元素相关联的类之一，也始终会调用第一个函数？

我注意到在测试一些解决方案时，硬编码'selected'作为一类button会导致相反的问题：即使toggleClass()有效，也只调用了第二个函数如预期。通过jQuery添加的类不是“count”作为类吗？

Answer 1

在运行CSS选择器时会对其进行评估。我不希望在页面加载时有任何匹配$('button.class.selected')的元素，所以你的第二个处理程序永远不会被执行，因为它永远不会绑定到任何东西。你应该做的是将事件附加到某个基本选择器，例如$('button.class')，然后在事件被触发时进行过滤。

$("button.class").on("click", function()
{
    if ($(this).is(".selected"))
    {
        console.log('selected');
        console.log($(this));
        $(this).removeClass('selected');
    }
    else
    {
        console.log('not selected');
        console.log($(this));
        $(this).addClass('selected');
    }
});

两个版本都有效，但有一个可能比另一个更合适，具体取决于你实际上要做什么。

如果你要做的就是在点击按钮上添加/删除.selected，那么这个更简单的版本将完成这项工作

$("button.class").on("click", function() { $(this).toggleClass("selected"); });

Answer 2

尝试更改：

$('button.class').not('.selected')

要：

$('button').not('.selected')

并且：

$('button.class.selected')

要：

$('button.selected')

.not方法失败了？

2 个答案: