如何将按钮切换为活动和非活动jquery

Question

我有3个按钮，如果我按下按钮1它应该改变颜色（我添加一些类）它也应该充当切换功能，如果我点击按钮2（当按钮1激活时）按钮1 shold不再活动，按钮2开始激活等等..我尝试写一些代码，它似乎无法正常工作，这是我fiddle.中的代码

＆＃13;

＆＃13;

$('.btn').on("click", function() {
  if ($(this).hasClass("price-filter-active")) {
    $(this).removeClass("price-filter-active");
  } else {
    $(this).addClass("price-filter-active");
  }
})

＆＃13;

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
      button 1
      <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
      button 2
    </button>

    <button class="span2 btn">
      button 3
    </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要实现此目的，您只需在具有您要添加的类的任何元素上调用removeClass()即可。您还可以使用toggleClass()简化切换类的逻辑，如下所示：

$('.btn').on("click", function() {
  $('.price-filter-active').not(this).removeClass('price-filter-active');
  $(this).toggleClass('price-filter-active');
})

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

button { 
  outline: 0; /* only to remove the ugly blue outline in this demo */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
       button 1
       <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
       button 2
    </button>

    <button class="span2 btn">
       button 3
    </button>
  </div>
</div>

请注意，此方法的另一个好处是可以通过再次单击来取消选中当前激活的按钮。

Answer 2

您只需简单地修改代码就可以做到这一点：只需将所有price-filter-active中的课程.btn删除，然后再将其添加到if语句后半部分的新闻中{1}}

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

＆＃13;

＆＃13;

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

＆＃13;

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
      button 1
      <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
      button 2
    </button>

    <button class="span2 btn">
      button 3
    </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是有一个更短的方法：

您可以点击.btn上的点击次数：

$('.btn').click(function() {
});

在其中，我们需要删除所有按钮上的课程price-filter-active，但点击后点击：

  $('.btn').not(this).removeClass("price-filter-active");

然后只需在点击的div上切换类：

  $(this).toggleClass("price-filter-active");

以下是完整代码：

$('.btn').click(function() {
  $('.btn').not(this).removeClass("price-filter-active");
  $(this).toggleClass("price-filter-active");
});

＆＃13;

＆＃13;

$('.btn').click(function() {
  $('.btn').not(this).removeClass("price-filter-active");
  $(this).toggleClass("price-filter-active");
});

＆＃13;

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
      button 1
      <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
      button 2
    </button>

    <button class="span2 btn">
      button 3
    </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

1. 使用.toggleClass()
2. 删除并添加课程
＆＃13;
＆＃13;
$('.btn').on("click", function() {

$('.btn.price-filter-active').toggleClass('price-filter-active')
  $(this).toggleClass("price-filter-active")
   
})
＆＃13;
.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
       button 1
        <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
       button 2
    </button>

    <button class="span2 btn">
       button 3
    </button>
  </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

jQuery世界上最简单的东西。

$('.btn').on("click", function(e){
$( event.target ).addClass("price-filter-active");
  $('.btn').not(this).removeClass("price-filter-active");

})

使用event.target代替此。确保将event.target包装在jQuery对象中，你就可以了。

你可以在这里使用this或event.target，没关系，我只显示了两个概念，而event.target并不总是一样。

所以jQuery有这个惊人的not（）方法，它可以链接。

这是链接

https://codepen.io/damianocel/pen/BdZbYb

Answer 5

＆＃13;

＆＃13;

else if(id == R.id.nav_search) {

       startActivity(new Intent(Intent.ACTION_SEARCH));

    }

＆＃13;

$(document).ready(function(){
$(".btn").click(function(){
$(".btn").removeClass("btn1");
$(this).addClass("btn1")
});
		});

＆＃13;

.btn1{
background: #42B549;
  color: white;
		}

＆＃13;

＆＃13;

＆＃13;