Question

超级noob问题，我刚开始使用jQuery。

我想要做的是有两个按钮可以改变标题的样式。单击红色按钮时，h1变为红色;当您单击黄色按钮时，h1变为黄色。

按钮只工作一次，然后......它们停止工作。我在这里缺少什么？

这是代码。

HTML

<h1>mywebsite</h1>
<button id="red">red</button>
<button id="yellow">yellow</button>

CSS

.red {
  color: red;
  font-size: 30px;
}

.yellow {
  color: yellow;
  font-size: 30px;
}

的jQuery

 $(document).ready(function () {
   var title = $("h1");
   $("#red").click(function() {
     title.addClass("red")
   });

   $("#yellow").click(function() {
     title.addClass("yellow");
  });
 });

Answer 1

问题是你的课程正在被添加，但从未被删除。

您可以通过执行以下操作来解决此问题：

$(document).ready(function () {
   var title = $("h1");
   $("#red").click(function() {
     title.addClass("red");
     title.removeClass("yellow");
   });

   $("#yellow").click(function() {
     title.addClass("yellow");
     title.removeClass("red");
  });
 });

无论如何，我会这样做，而不是使用类，我只是动态添加带有.css() JQuery函数的CSS样式。

$(document).ready(function () {
   var title = $("h1");
   $("#red").click(function() {
     title.css("color", "red");
   });

   $("#yellow").click(function() {
     title.css("color", "yellow");
  });
 });

Answer 2

短版

$(document).ready(function () {
   $("#red, #yellow").click(function() {
      $("h1").removeClass().addClass(this.id);
   });
});

用于在文本样式之间切换的按钮在jQuery中不起作用？

2 个答案: