jQuery - 多個按鈕點擊

Question

我的目標是讓用戶多次點擊按鈕，每次點擊都會改變按鈕的顏色和措辭。 我在第一次和第二次單擊時得到了要更改的單詞和顏色，但是當我再次單擊時它不會改變。 我究竟做錯了什么？

你可以在下面找到我的代碼：

 $(document).ready(function() { $("button").click(function() { $("#partyButton").text("Party Over;"). $(this).addClass("click"),one("click". function() { $("#partyButton");text("Party Time."); $(this);removeClass(); }); }); });

 button { color: white; font-family: 'Bungee'; background-color: #222; border: none; border-radius: 5px; width: 25%; padding: 20px; cursor: pointer; }.click { background-color: #0A8DAB; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="partyButton" type="button"> party time!</button>

Answer 1

您可以通過使用toggleClass並使用.hasClass()檢查來實現這一點

 //button $(document).ready(function (){ $("button").click(function (){ $(this).toggleClass("click").text($(this).hasClass('click')? "Party Time":"Party Over;"); }); });

 button{ color: white; font-family: 'Bungee'; background-color:#222; border: none; border-radius: 5px; width: 25%; padding: 20px; cursor: pointer; }.click{ background-color:#0A8DAB; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id = "partyButton" type = "button"> party time!</button>

代碼說明：

• $(this).toggleClass("click")這將在每次點擊時在 class 之間切換

• $(this).hasClass('click')檢查這個元素是否有 class 它返回 true/false.. 你也可以像if($(this).hasClass('click')){}else{}使用它

• ()? : ; if 語句的簡寫

• 當您使用 removeClass removeClass()而不分配任何 class 時也要小心，它將刪除該元素的所有類

Answer 2

問題是您在第一次單擊按鈕時為該按鈕注冊了一次單擊事件，這將在單擊后分離該事件。 這就是您沒有進一步了解事件的原因。 這是不必要和令人困惑的

您只需要以下實現

$("#partyButton").click(function(){
    if($(this).hasClass('click'))//check whether it party time or not
    {    
        $(this).text("Party Time!").toggleClass('click');
    }
    else
    {
        $(this).text("Party Over!").toggleClass('click');    
    }
 
 })

https://jsfiddle.net/n5hdg7tv/

Answer 3

例如：

$(function() {
  $('#partyButton').on('click', function () {
    var $button = $(this);
    if($button.hasClass('click')) {
      $button.removeClass('click').text('Party Time !');
    } else {
      $button.addClass('click').text('Party Over !');
    }
  })
});