JQuery и несколько кнопок

у меня есть несколько кнопок, которые получают свой активный стиль css со скриптом переключения jQuery. Но я хочу, чтобы одновременно была активна только одна кнопка. Но также, когда я повторно нажимаю активную кнопку, она должна стать неактивной.

$(document).ready(function(){
    $('.button').click(function() {       
        $(this).toggleClass('buttonactive');
    });
});

В общем, мне нужно добавить строчку:

$(all .button except this).removeClass('buttonactive');

Я не знаю, как. Кто-нибудь может мне помочь? Вот JSFIDDLE с проблемой:http://jsfiddle.net/nV5Tu/3/

6
jquery toggle

4 ответов

вы можете сделать это с помощью .toggleClass() для переключения текущего элемента.. затем с помощью .не() чтобы отфильтровать текущий элемент от удаления класса

$('.button').click(function() {  
    $('.button').not(this).removeClass('buttonactive'); // remove buttonactive from the others
    $(this).toggleClass('buttonactive'); // toggle current clicked element
});

скрипка

9

почему бы вам просто не удалить для всех и просто добавить для this ?

$('.button').click(function() {       
    $('.button').removeClass('buttonactive');    
    $(this).addClass('buttonactive');
});
1

это должно сделать трюк:

  $(document).ready(function(){
        $('.button').click(function() {

            if($(this).hasClass("buttonactive")) {       
                $(this).removeClass('buttonactive');
            } else {
                $(this).addClass('buttonactive');
            }
            $(".button").removeClass("buttonactive"); // removes all other active classes
        });
    });

поскольку вы новичок, не забудьте отметить этот ответ как "ответ";)

1

вам не нужно три document.ready(function().. одного достаточно ... 

$('.button').click(function() { 
 $(".button").removeClass("buttonactive");  // remove the class for all button on click
});

скрипку здесь

0