Как удалить toggleClass при нажатии и при нажатии любого другого элемента и пробела?

Я использую JQuery toggleClass для изменения цвета кнопки при нажатии. При повторном щелчке он должен вернуться к исходному цвету, а при щелчке мышью в любом другом месте, включая пустое пространство, он должен вернуться к исходному цвету.

Я не мог понять, как это сделать, но ниже приведены два фрагмента, которые мне удалось найти и подключить.

Следующий фрагмент изменит цвет при нажатии кнопки, но при повторном нажатии он не вернется к исходному цвету, но при нажатии любого другого элемента или пробела цвет кнопки возвращается к исходному цвету:

  (function () {
$('.button_is').click(function(evt) {
    evt.stopPropagation(); //stops the document click action
    $(this).siblings().removeClass('button_addition');
    $(this).toggleClass('button_addition');
});


$(document).click(function() {
    $('.button_is').removeClass('button_addition'); //make all inactive
});
});

Следующий фрагмент будет переключать класс при щелчке элемента, а при повторном щелчке он возвращается в исходное состояние, но не вернется к исходному цвету, если щелкнуть в другом месте:

 $(document).ready(function () {

            $(".button_is").click(function () {
                $(this).toggleClass("button_addition");
            });
        });

Какой из этих двух фрагментов я могу использовать, чтобы убедиться, что при нажатии кнопки цвет меняется, а при повторном нажатии возвращается к исходному цвету И при нажатии других элементов или пустого пространства возвращается к исходному цвету?


javascript jquery removeclass toggleclass
person AAA    schedule 16.04.2013    source источник

Ответы (5)


arrow_upward
1
arrow_downward

Попробуй это

 $(function() {
        $('.button_is').on('click',
        function(event) {
            event.stopPropagation();
            $('.button_is').toggleClass('button_addition');
        });
        $('html').click(function() {
            $('.button_is').removeClass('button_addition');
        });
    });
person Younus Ali    schedule 16.04.2013

arrow_upward
2
arrow_downward

Вы можете попробовать это

$(document).ready(function () {

    $(".button_is").click(function (e) {
        e.stopPropagation();
        $(this).toggleClass("button_addition");
    });

    $(document).click(function() {
        $(".button_is.button_addition").trigger("click");
    });    

});

ДЕМО.

person The Alpha    schedule 16.04.2013

arrow_upward
1
arrow_downward

Скрипка: http://jsfiddle.net/9ZKfq/

$(document).ready(function() {

    $(document).click(function(jEvent) {    

        if (!$(jEvent.target).hasClass('button_is')) 
        {
           $('.button_is').removeClass('button_addition');
        }
        else
        {
            $(jEvent.target).toggleClass('button_addition');
        }

    });

});
person Gary Green    schedule 16.04.2013

arrow_upward
1
arrow_downward

Попробуй это -

    $(document).ready(function () {
        $(".button_is").click(function () {
            $(this).toggleClass("button_addition");
        });

        $(document).click(function(event) {
          if(!$(event.target).is('.button_is')){
            $('.button_is').removeClass('button_addition'); //make all inactive
          }
        });
  });
person Mohammad Adil    schedule 16.04.2013

arrow_upward
1
arrow_downward

Ваш первый фрагмент работает для меня.

Может быть, проблема в вашем HTML?

Стоит отметить, что в вашем коде есть опечатка (вам не хватает $ в обработчике готовности).

Посмотрите на это: http://jsfiddle.net/URrVf/ Он работает в Chrome, Firefox и IE9.

person Nefreo    schedule 16.04.2013