Question

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

所以我有一个让我们说10个不同的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（已被单击）应将其重置为正常。我能做到这一点吗？：

$（本）.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）元素

Jquery问题onclick添加类并删除类

5 个答案: