Question

我已阅读Javascript / JQuery Toggle Active Class between 2 buttons on a button group。但是我有一种情况，我想在点击的按钮上切换活动类，但保持其他按钮的状态。

例如：

 <!-- Button 1 -->
 <input type="button" name="btn1" class="filter-btn active">

 <!-- Button 2 -->
 <input type="button" name="btn2" class="filter-btn">

 <!-- Button 3 -->
 <input type="button" name="btn3" class="filter-btn active">

 <!-- Button 4 -->
 <input type="button" name="btn4" class="filter-btn">

按钮1和按钮3有一个active类。

如果我单击按钮1，意图将其切换为非活动状态，我想删除按钮1 上的active类，但保留按钮3上的active类

我无法看到如何执行此操作，因为以下内容将删除所有按钮上的active类，然后再次单击时将其重新应用于按钮1：

$('.filter-btn').on('click', 'input', function() {
    $(this).addClass('active').siblings().removeClass('active');
});

所以最终结果是Button 1删除了active类，这就是我想要的。但是按钮3也删除了active类，我不想要。

怎么可能这样编写它所以它只是在点击的按钮上切换类并将其他所有内容保留为原样？

Answer 1

您可以为输入运行一些条件工作，以便在您单击的输入上添加和删除类：

＆＃13;

$( "input" ).click(function() {
        var $this = $(this);
   
        if ($this.hasClass("active")) {
            $this.removeClass("active");
        } else {
            $this.addClass("active");
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
 <!-- Button 1 -->
 <input type="button" name="btn1" class="filter-btn active">

 <!-- Button 2 -->
 <input type="button" name="btn2" class="filter-btn">

 <!-- Button 3 -->
 <input type="button" name="btn3" class="filter-btn active">

 <!-- Button 4 -->
 <input type="button" name="btn4" class="filter-btn">

＆＃13;

您可以检查inputs的元素，一旦点击它们即可添加active类，如果点击则删除

更新

如果您希望进一步缩小JavaScript，可以使用toggleClass（）：

$( "input" ).click(function() {
    $(this).toggleClass("active");
});

在按钮上切换活动类但保持其他按钮的状态

1 个答案:

更新