在按钮上切换活动类，但保持其他按钮的状态 [英] Toggle active class on a button but maintain state of other buttons

问题描述

我已阅读 Javascript / JQuery在按钮组上的2个按钮之间切换活动类。然而，我有一种情况，我想在被点击的按钮上切换活动类，但保持其他按钮的状态。

例如：

 <！ - 按钮1  - > 
< input type =buttonname =btn1class =filter-btn active> 
 
<！ - 按钮2  - > 
< input type =buttonname =btn2class =filter-btn> 
 
<！ - 按钮3  - > 
< input type =buttonname =btn3class =filter-btn active> 
 
 <！ -   - 按钮4  - > 
< input type =buttonname =btn4class =filter-btn> 
  

按钮1和按钮3有一个活动

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

我看不到如何做到这一点，因为以下内容将删除所有按钮上的活动类，然后在再次单击时将其重新应用到按钮1：

$（$'$ p
$ b

  $（'。filter-btn'）。on（'click'，'input'，function（）{
 $这个）.addClass（'active'）。siblings（）。removeClass（'active'）; 
}）; 
  

所以最终结果是Button 1的活动 class removed，这正是我想要的。但按钮3也有活动类被删除，我不想要。

这怎么可能写这个，所以它只切换点击按钮上的类，并保持原样？

解决方案

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

data-console =truedata-babel =false>

您可以通过检查输入中的元素，点击活动 >类将被添加和删除，如果点击

更新

如果您想要进一步减少JavaScript ，可以使用toggleClass（）：

  $（input）.click（function（）{
 $ （this）.toggleClass（active）; 
}）; 
  

I've read Javascript / JQuery Toggle Active Class between 2 buttons on a button group. However I have a situation where I want to toggle the active class on a button being clicked, but maintain the state of the other buttons.

For example:

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

Button 1 and Button 3 have an active class.

If I click Button 1, with the intention of toggling it to being inactive, I want to remove the active class on Button 1 but keep the active class on Button 3.

I can't see how to do this because the following will remove the active class on all buttons, then re-apply it to Button 1 when clicked again:

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

So the end result is that Button 1 has the active class removed, which is what I want. But Button 3 also has the active class removed, which I don't want.

How is it possible to write this so it only toggles the class on the button clicked and leaves everything else as-is?

解决方案

You can run some conditional work for your input to add and remove class on the input you click:

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

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

You can check by inspecting the elements of the inputs once clicking them that the active class would be added and removed if clicked

Update

If you would like to slim the JavaScript down further, you can use toggleClass():

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

这篇关于在按钮上切换活动类，但保持其他按钮的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！