Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: Andrew NgОтветов: 4

первый раз пишу сюда. Я новичок в 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("фоновое меню");

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

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

  • Я думаю, что блок else никогда не будет выполнен... я ошибаюсь? MD Sayem Ahmed 11.06.2011
  • @Скажи, нет, ты не ошибаешься. Можно даже сказать, что вы правы ;-) Matt Ball 11.06.2011

javascriptclassif-statementjquery

Ответы

Ответ 1 · рейтинг 4 · Sotiris

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

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

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

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

Ответ 2 · рейтинг 2 · wdm

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

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

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

Ответ 3 · рейтинг 1 · Matt Ball

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

Ответ 4 · Thiago Belem

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы