Jquery问题onclick添加类和删除类

Question

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

所以我有一个比方说10个不同的div。所有人都有相同的班级。每次我单击 div 时，它都必须添加另一个类（在本例中是 css 中的背景颜色）。为此，我有这样的：

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

有谁知道这个问题的答案吗？？？

问候， 安德鲁

Answer 1

尝试以下操作：

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

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

（我删除了 if 因为在这种情况下它没有用）

Answer 2

从所有中删除...

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

然后添加到 this

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。

Answer 4

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

Answer 5

另一种选择是：

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

这样您就不会删除类并将其添加到特定的（this）元素