javascript jquery 问题 onclick 添加类和删除类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6318122/
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
Jquery problem onclick add class and remove class
提问by Andrew Ng
first time posting here. I'm a beginner in jquery and i ran into some grey area. Hopefully i can find my answer here and learn from it also :)
第一次在这里发帖。我是 jquery 的初学者，我遇到了一些灰色地带。希望我能在这里找到我的答案并从中学习:)
So i have a let's say 10 different div. All has the same class. And everytime I click on the div it has to add another class (in this case background-color in css). For that I have this:
所以我有一个假设 10 个不同的 div。所有人都有相同的班级。每次我单击 div 时，它都必须添加另一个类（在这种情况下，css 中的背景颜色）。为此，我有这个：
$(document).ready(function() {
$(".menucardmenu").click(function(){
if($(this).hasClass("menucardmenu")) {
$(this).addClass("backgroundmenucard");
}
else {
alert ("condition false");
}
});
});
But the question now is, how can i make that only one div can have that background-color (in my case backgroundmenucard). Depending one which div the user click, that div will have the background-color, and the previous div (that was clicked) should reset it back to normal. I can do it with this right?:
但现在的问题是，我怎样才能让只有一个 div 可以具有该背景颜色（在我的情况下是 backgroundmenucard）。根据用户单击哪个 div，该 div 将具有背景颜色，并且前一个 div（被单击）应将其重置为正常。我可以这样做吗？：
$(this).removeClass("backgroundmenucard");
$(this).removeClass("backgroundmenucard");
does anyone know the answer to this???
有谁知道这个问题的答案？？？
Regards, Andrew
问候， 安德鲁
回答by Sotiris
try the following:
尝试以下操作：
$(".menucardmenu").click(function(){
$(".backgroundmenucard").removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
});
Demo: http://jsfiddle.net/r2Sua/
演示：http: //jsfiddle.net/r2Sua/
(I remove the ifbecause it's useless in this case)
（我删除了if因为在这种情况下它没用）
回答by wdm
Remove from all...
从所有删除...
$(".menucardmenu").removeClass("backgroundmenucard");
Then add to this
然后添加到 this
回答by Matt Ball
$(function() // shorthand for document ready
{
var $divs = $('div.menucardmenu'), // standard jQuery "cache" idiom
BG_CLASS = 'backgroundmenucard'; // stay DRY, less prone to typos
$divs.live('click', function() // use .live to bind only 1 event listener
{
// remove the class from all divs
$divs.removeClass(BG_CLASS);
// add the class to this div
$(this).addClass(BG_CLASS);
}
});
});
The if($(this).hasClass("menucardmenu"))check is completely unnecessary since you're already selecting elements which have that class. It will always evaluate to true.
该if($(this).hasClass("menucardmenu"))检查完全没有必要，因为您已经在选择具有该类的元素。它将始终评估为true。
回答by Sunny
$('.menucardmenu').click(function(){
$('.menucardmenu').removeClass('backgroundmenucard');
$(this).addClass('backgroundmenucard');
});
回答by Thiago Belem
Another option would be:
另一种选择是：
$(".menucardmenu").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
This way you don't remove and add the class to the specific (this) element
这样您就不会删除类并将其添加到特定的 (this) 元素
