Question

我想在单击jQuery中的按钮时将标题从黄色更改为蓝色，然后再更改为黄色

$("#title2-button").click(function(){
  if ($("#title2").css("color", "yellow")) {
     $("#title2").removeClass("yellow");
     $("#title2").addClass("blue"); 
  } else {
    $("#title2").css("color", "yellow");
  }
});

#title2{
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id ="title2"> Weekends and Holidays Included</h2>
<button id="title2-button">Alter Second title</button>

Answer 1

您可以像下面一样使用.toggleClass()。

这段代码基本上是：

单击按钮后，它将“切换”类blue。这意味着如果#title2具有蓝色类别，则将其删除。如果没有该类，则将其添加。 !important可以确保类blue覆盖以前的黄色。
因为默认颜色是黄色，所以如果toggleClass删除了该类，则颜色会变回黄色。如果添加了类，则颜色变为蓝色（由于存在!important，因此颜色将是蓝色而不是黄色）。

$("#title2-button").click(function() {
  $("#title2").toggleClass("blue");
});

#title2 {
  text-align: center;
  color: yellow;
}
.blue {
  color: blue !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id ="title2"> Weekends and Holidays Included</h2>
<button id="title2-button">Alter Second title</button>

Answer 2

您可以使用toggleClass方法来做到这一点，

$("#title2-button").click(function(){
    $("title2").toggleClass("blue");
  });

Answer 3

使用hasClass检查类是否存在。希望这是您想要的，谢谢

$("#title2-button").click(function(e){

if($('#title2').hasClass('yellow'))
{
$('#title2').removeClass('yellow').addClass('blue')
}
else
$('#title2').removeClass('blue').addClass('yellow')

})

.yellow
{
color:yellow
}
.blue
{
color:blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="yellow" id="title2">Some content</div>
<button id="title2-button">Alter Second title</button>

如何切换按钮以将标题更改为不同的颜色并恢复为原始

3 个答案: