0

JQuery toggleClass を使用して、ボタンをクリックしたときにボタンの色を変更しています。もう一度クリックすると元の色に戻り、空白を含む他の場所をクリックすると元の色に戻ります。

私はそれを行う方法を理解できませんでしたが、以下は私が何とか見つけてプラグインした2つのスニペットです.

次のスニペットは、ボタンをクリックすると色が変わりますが、もう一度クリックすると元の色に戻りませんが、他の要素または空白をクリックすると、ボタンの色が元の色に戻ります:

  (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");
            });
        });

ボタンをクリックすると色が変わり、もう一度クリックすると元の色に戻り、他の要素または空白をクリックすると元の色に戻るようにするために、これらの 2 つのスニペットのどれを使用できますか?

4

5 に答える 5

1

これを試して -

    $(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
          }
        });
  });
于 2013-04-16T19:00:31.627 に答える
1

フィドル: 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');
        }

    });

});
于 2013-04-16T19:09:47.413 に答える