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

первый раз пишу сюда. Я новичок в 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 (который был нажат) должен сбросить его до нормального состояния. Я могу сделать это с этим правом?:

$(это).removeClass("фоновое меню");

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

С уважением, Эндрю


javascript class if-statement jquery
person Andrew Ng    schedule 11.06.2011    source источник
comment
Я думаю, что блок else никогда не будет выполнен... я ошибаюсь?   -  person MD Sayem Ahmed    schedule 11.06.2011
comment
@Скажи, нет, ты не ошибаешься. Можно даже сказать, что вы правы ;-)   -  person Matt Ball    schedule 11.06.2011

Ответы (4)


arrow_upward
4
arrow_downward

попробуйте следующее:

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

Демонстрация: http://jsfiddle.net/r2Sua/

(я удаляю if, потому что в данном случае это бесполезно)

person Sotiris    schedule 11.06.2011
comment
Это было именно то, что мне было нужно. Большое спасибо. Да, я изучал оператор if-else, поэтому использовал его для основы. После этого я не был уверен, в чем была цель, так как я уже работал - person Andrew Ng; 12.06.2011

arrow_upward
2
arrow_downward

Удалить из всех...

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

Затем добавьте к this

person wdm    schedule 11.06.2011

arrow_upward
1
arrow_downward 

$(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.

person Matt Ball    schedule 11.06.2011

arrow_upward
0
arrow_downward

Другой вариант:

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

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

person Thiago Belem    schedule 11.06.2011
comment
Вы добавляете класс в this несмотря ни на что, так что это действительно не имеет значения. - person Matt Ball; 12.06.2011