Question

使用以下代码移开按钮后，我可以使单个按钮保持活动状态：

php artisan migrate:rollback

但我也希望页面上的所有其他按钮都处于非活动状态。我尝试了以下方法，但是使所有非活动状态的表达式都需要在click函数之外。如何在点击功能内部运行循环来迭代整个按钮？

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

Answer 1

您不需要使用.each（）进行迭代 - 只需在按钮单击时删除.active类，然后将其应用于单击的按钮。

刚编辑帖子也将非活动类应用于按钮，因此单击一个按钮会将非活动类应用于未单击的按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

不使用（this）：Working fiddle

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

Answer 3

据我所知，问题是您删除了每个活动的按钮类，然后检查按钮是否具有该类。这没有任何意义，因为你之前已经删除它，你可以将它保存为变量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')
    }
});
});

Answer 4

$('.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')
    }

}）;

JQuery使按下的按钮处于活动状态，所有其他按钮处

4 个答案: