jQuery问题：点击时添加类和删除类

Question

第一次在这里发布。我是jquery的初学者，遇到了一些困难。希望我能在这里找到答案并从中学习 :)

所以我有10个不同的div。所有的div都有相同的类。每次我点击div时，它都必须添加另一个类（在这种情况下是css中的background-color）。为此，我有以下代码：

$(document).ready(function() {
$(".menucardmenu").click(function(){
        if($(this).hasClass("menucardmenu")) {
               $(this).addClass("backgroundmenucard");
    }
    else {
        alert ("condition false");
    }
  });
});

但问题是，我该如何使只有一个div可以拥有这个背景颜色（在我的情况下是backgroundmenucard）。根据用户点击的div，该div将具有背景颜色，并且先前被单击的div应将其重置回正常状态。我可以用这个做到吗？：

$(this).removeClass("backgroundmenucard");

有人知道答案吗？

问候， 安德鲁

- Andrew Ng

---

我认为 "else" 块永远不会执行...我错了吗？ - MD Sayem Ahmed

@Sayem，你没有错。你甚至可以说你是对的 ;-) - Matt Ball

Answer 1

请尝试以下方法：

$(".menucardmenu").click(function(){
    $(".backgroundmenucard").removeClass("backgroundmenucard");
     $(this).addClass("backgroundmenucard");
  });

演示: http://jsfiddle.net/r2Sua/

(我删除了if因为在这种情况下它是无用的)

- Sotiris

---

这正是我所需要的。非常感谢您。是的，我正在研究if-else语句，所以我将其用于基本操作。之后，我不确定它的目的是什么，因为它已经可以工作了。 - Andrew Ng

Answer 2

从所有中删除...

$(".menucardmenu").removeClass("backgroundmenucard");

然后添加到this中。

- wdm

Answer 3

$(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);
    }
  });
});

if($(this).hasClass("menucardmenu"))的检查是完全不必要的，因为您已经选择了具有该类的元素。它将始终评估为true。

- Matt Ball

Answer 4

$('.menucardmenu').click(function(){
 $('.menucardmenu').removeClass('backgroundmenucard');
 $(this).addClass('backgroundmenucard');
});

- Sunny

Answer 5

另一种选择可能是：

$(".menucardmenu").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");

这样你就不需要从特定的（this）元素中删除和添加类了

- Thiago Belem

---

无论如何，您都将类添加到“this”中，因此实际上并没有什么区别。 - Matt Ball