JQuery は押されたボタンをアクティブにし、他のすべてのボタンを非アクティブにします

[ad_1]

JQueryは押されたボタンをアクティブにし、他のすべてのボタンを非アクティブにします

尋ねた
5年10ヶ月前

見た11k回

以下のコードを使用して、ボタンから離れた後も 1 つのボタンをアクティブなままにすることができます。

    $('.btn').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });

しかし、ページ上の他のすべてのボタンも非アクティブにしたいと考えています。次のことを試しましたが、すべてを非アクティブにする式は、クリック関数の外にある必要があります。クリック関数内でループを実行してボタン全体を繰り返すにはどうすればよいですか?

$('.btn').click(function(){
    //make all inactive-doesn't work
    $( '.btn' ).each(function( ) {
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        }
    });

    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});

尋ねた 2017 年 1 月 5 日 3:34

ドン・スマイス

8,526

.each() を使用して繰り返す必要はありません。ボタンのクリック時に .active クラスを削除し、クリックされたボタンに適用するだけです。

ボタンにも非アクティブなクラスを適用するように投稿を編集したので、1 つのボタンをクリックすると、クリックされなかったボタンに非アクティブなクラスが適用されます。

$(document).ready(function(){
  $('.btn').click(function(){
    $('.btn').removeClass('active').addClass('inactive');
     $(this).removeClass('inactive').addClass('active');
    });
})

.btn{color:white}
.active{background:green}
.inactive{background:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn inactive">test 1</button>
<button type="button" class="btn inactive">test 2</button>
<button type="button" class="btn inactive">test 3</button>

答えた 2017 年 1 月 5 日 3:46

ガヴグリフ

14.5k

not (this) を使用: 働くフィドル

 $('.btn').click(function() {
      if ($(this).is("active"))
        $('.btn').not(this).removeClass('active');
      else
        $(this).addClass('active');
      $('.btn').not(this).removeClass('active');
    });

答えた 2017 年 1 月 5 日で 3:52

4b0

20.9k

私が理解しているように、問題は、アクティブなすべてのボタンクラスを削除してから、ボタンにそのクラスがあるかどうかを確認することです。以前に削除したことがあるため、これは意味がありません。次のようにすべてのボタンを削除する前に、変数 true または false として保存できます。

$(function(){
$('.btn').click(function(){
    var active = $(this).hasClass('active');
    //make all inactive-doesn't work
    $( '.btn' ).each(function( ) {
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        }
    });

    if(active){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});
});

答えた 2017 年 1 月 5 日で 3:41

衝動的

648

$('.btn').click(function(){
    // remove all the active class
    $( '.btn').each(function() {
        $(this).removeClass('active')
    });
    //then the click button add class active 
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }

});

答えた 2017 年 1 月 5 日で 3:42

ジャック・ウー

301

押されたボタンをアクティブにし、他のすべてのボタンを非アクティブにする簡単な方法は、CSS と JavaScript だけです。

.btn-active {
font-weight: bold !important;
border-right: 5px solid blue !important;

}

<div id="box 1"></div>, <div id="box 2"></div>,<div id="box 3"></div>


  <script>
$(document).ready(function(){
 $("#box 1").click(function(){
$("#box 1").addClass('btn-active');
$("#box 2").removeClass('btn-active');
$("#box 3").removeClass('btn-active');


 });
$("#box 2").click(function(){
$("#box 2").addClass('btn-active');
$("#box 1").removeClass('btn-active');
$("#box 3").removeClass('btn-active');
 });
$("#box 3").click(function(){
$("#box 3").addClass('btn-active');
$("#box 2").removeClass('btn-active');
$("#box 1").removeClass('btn-active');
 });
});
</script>