jQuery - 多个按钮点击

Question

My aim is for the users to click the button multiple times and on each click it changes the color and the wording on the button. I got the word and the color to change on the first and second click but it doesn't change when I click again. What am I doing wrong?

You can find my code below:

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

You can achieve this By using toggleClass and check with .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>

Code Explanation:

• $(this).toggleClass("click") this will toggle between class on each click

• $(this).hasClass('click') check if this element has a class it return true/false.. you can also use it like if($(this).hasClass('click')){}else{}

• ()? : ; shorthand if statment

• Also Take care when you use removeClass() without assign any class it will remove all the classes for this element

Answer 2

The problem is you are registering an one time click event for the button while the button is clicked for the first time, which will detach the event once clicked. This is the reason you are not getting the event further. It is unnecessary and confusing

You just need the below implementation

$("#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

For example:

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