JQuery 使按下的按钮处于事件状态，而所有其他按钮处于非事件状态

Question

我可以使用以下代码使单个按钮在关闭按钮后保持事件状态:

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

Answer 1

您不需要使用 .each() 进行迭代 - 只需删除按钮单击上的 .active 类并将其应用到单击的按钮即可。

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

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