jQuery $().toggleClass(); 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18603558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$().toggleClass(); not working
提问by Joe Pigott
Hereis the Fiddle. I am trying to make my own checkbox by using a <div>, and applying colors with $().css(). When you click the div, I am trying to use $().toggleClass()in a click function to change the background-color to #96f226
这里是小提琴。我正在尝试通过使用<div>和 应用颜色来制作自己的复选框$().css()。当您单击 时div，我试图$().toggleClass()在单击功能中使用将背景颜色更改为#96f226
jQuery:
jQuery：
$('div').mouseenter(function(){
$(this).css('background','#656565');
});
$('div').mouseleave(function(){
$(this).css('background','#4a4a4a');
});
$('div').click(function(){
$(this).toggleClass('active');
});
HTML:
HTML：
<div></div>
CSS:
CSS：
div {
width: 15px;
height: 15px;
background: #4a4a4a;
cursor: pointer;
}
.active {
background: #96f226
}
回答by raina77ow
With that .csscall for 'background' property, you change the corresponding inlinestyle of an element, specified as its attribute. In other words, your mouseenterhandler turns <div>into <div style="background: ##656565">. mouseleaveworks the similar way, it's just the value of styleattribute that is different.
通过.css调用 'background' 属性，您可以更改元素的相应内联样式，指定为其属性。换句话说，你的mouseenter处理程序变成<div>成<div style="background: ##656565">。mouseleave工作方式类似，只是style属性的值不同。
The problem is that style rule set in that way - within styleattribute - has the highest specificitythan the one applied as a result of a class-match rule (or any combination of selectors) given in the CSS ruleset.
问题在于以这种方式设置的样式规则 - 在style属性内-比作为 CSS 规则集中给出的类匹配规则（或选择器的任何组合）应用的样式规则具有最高的特异性。
That's why you don't see any changes when class activeis added to the element (and it's easy to check that the class IS added indeed; it's just its rule that's not accounted).
这就是为什么在将类active添加到元素时您看不到任何更改的原因（并且很容易检查是否确实添加了类；这只是它的规则没有考虑在内）。
That problem is quite easy to fix if you remove all fiddling with inline styles altogether, and use another class - for mouseenterhandler to set, and mouseleaveto remove.
如果您完全删除对内联样式的所有摆弄，并使用另一个类 - 用于mouseenter设置和mouseleave删除处理程序，则该问题很容易解决。
But actually, you don't even need that: the events you're trying to process are already handled by browser, in quite a good way. It's to easy to leverage: just set up the style rules for :hoverpseudo-class, like this:
但实际上，您甚至不需要那个：您尝试处理的事件已经由浏览器以一种很好的方式处理了。很容易利用：只需为:hover伪类设置样式规则，如下所示：
div:hover {
background: #656565
}
div.active, div.active:hover {
background: #96f226
}
And here's a Fiddleto play with.
这是一个可以玩的小提琴。
回答by Daniel A. White
It is because the priority order of a classis lower than the styleattribute.
这是因为a的优先级class比style属性低。
回答by ced-b
When you set the CSS property directly on the element, this takes priority over your toggled class. To make it work you have to add another class.
当您直接在元素上设置 CSS 属性时，这将优先于您的切换类。为了使它工作，你必须添加另一个类。
.enter {
background: #656565;
}
And then your JS would be like this:
然后你的 JS 会是这样的：
$('div').mouseenter(function(){
$(this).addClass("enter");
});
$('div').mouseleave(function(){
$(this).removeClass("enter");
});
$('div').click(function(){
$(this).toggleClass('active');
});
See this fiddle http://jsfiddle.net/w8yuZ/5/
看到这个小提琴http://jsfiddle.net/w8yuZ/5/
回答by bodruk
Try this:
尝试这个：
$(function(){
$('div').mouseenter(function(){
$(this).css('background','#656565');
});
$('div').mouseleave(function(){
$(this).css('background','#4a4a4a');
});
$('div').click(function(){
$(this).toggleClass('active');
});
});
回答by reyaner
this will help you:
这将帮助您：
.active {
background: #96f226 !important;
}
