0

我编写了两个 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 添加的类不“算”为类吗？

4

2 回答 2

3

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"); });
于 2012-06-12T04:34:48.587 回答
0

尝试改变：

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

到：

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

和 ：

$('button.class.selected')

到：

$('button.selected')
于 2012-06-12T04:28:52.873 回答