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 !');
    }
  })
});