如何將按鈕切換為活動和非活動jQuery

Question

我有3個按鈕，如果我按按鈕1，它應該更改顏色（我添加了一些類），它也應該充當切換功能，如果我單擊按鈕2（當按鈕1處於活動狀態），按鈕1保持不活動再也沒有，按鈕2開始激活，依此類推..我嘗試編寫一些代碼，但似乎無法正常工作，這是我的小提琴代碼。

 $('.btn').on("click", function() { if ($(this).hasClass("price-filter-active")) { $(this).removeClass("price-filter-active"); } else { $(this).addClass("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; } 

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

您只需修改代碼就可以做到這一點：在if語句的后半部分將其添加到媒體之前，只需從所有.btn刪除class price-filter-active 。

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

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

 .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; } 

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

但是有一種更短的方法：

您可以像這樣捕獲.btn點擊：

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

在其中，我們需要取消所有按鈕上的class 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");
});

 $('.btn').click(function() { $('.btn').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; } 

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

Answer 3

1. 使用.toggleClass()
2. 刪除和添加類

 $('.btn').on("click", function() { $('.btn.price-filter-active').toggleClass('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; } 

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

Answer 4

嘗試這種方式： https : //jsfiddle.net/zr3mx2h0/

 $('.btn').on("click", function(){ $('.btn.price-filter-active').removeClass("price-filter-active"); $(this).addClass("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; } 

 <script type="text/javascript" src="https://cdnjs.cloudflare.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> 

Answer 5

您可以首先從所有按鈕中刪除.price-filter-active類，然后將其添加到click事件處理程序上的clicked按鈕中。

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

請在jsbin中檢查它。

Answer 6

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 7

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn">button1</button> <button class="btn">button2</button> <button class="btn">button3</button>