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")这将在每次点击时在类之间切换

• $(this).hasClass('click')检查此元素是否有类，返回true/false。。你也可以像if($(this).hasClass('click')){}else{}一样使用它

• 报表的() ? : ;简写

• 另外，当您在不分配任何类的情况下使用removeClass()时，请注意，它将删除此元素的所有类

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