JQuery проблема на клик добавить класс и удалить класс

Question

впервые публикуется здесь. Я новичок в jquery, и я столкнулся с серой зоной. Надеюсь, я смогу найти свой ответ здесь и поучиться у него также:)

Итак, у меня есть, скажем, 10 различных div. У всех один класс. И каждый раз, когда я нажимаю на div, он должен добавлять другой класс (в этом случае background-color в css). Для этого у меня есть это:

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

Но теперь вопрос в том, как я могу сделать так, чтобы только один div мог иметь этот цвет фона (в моем случае backgroundmenucard). В зависимости от того, какой div пользователь щелкает, этот div будет иметь цвет фона, а предыдущий div (который был нажат) должен вернуть его в нормальное состояние. Я могу сделать это с этим правильно?:

$ (это) .removeClass ( "backgroundmenucard");

кто-нибудь знает ответ на этот вопрос?

С уважением, Andrew

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").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");

Таким образом, вы не удаляете и не добавляете класс к определенному (этому) элементу

Answer 5

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