.not方法失败？

我已经写了两种jQuery的功能，这简化版本的这样运行：按钮总是.not方法失败？

$('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检查显示该在点击按钮之前：

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

和这个点击它之后：

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

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

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

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

来源

2012-06-12 Kyle

的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-12 04:34:48

这是有帮助的，谢谢。除了切换“selected”外，还有其他一些功能正在运行，但是您的解释会有很大帮助。 – Kyle

你的第二个例子非常出色，除了一个小错误（至少在Safari中）。第一行应该阅读'if（$（“button.class”））。on（“click”，function（）'。非常感谢！ – Kyle

是的，修正了语法错误。 –

尝试改变：

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

要：

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

和：

$('button.class.selected')

要：

$('button.selected')

来源

2012-06-12 04:28:52 qwertymk

.not方法失败？

回答

相关问题