javascript - 如何在 JQuery 中动态改变颜色？

Question

如何在按下按钮时在两种颜色之间动态变化？

Example: 
Press button = yellow
Press button = red
Press button = yellow
Press button = red
...



$('button').click(function(){
    $(this).css('color', 'yellow');
    ...
});

Answer 1

您需要通过应用类或将单击状态保存在变量中来保存状态。

$("button").on("click", function () {
    $(this).toggleClass("red yellow");
});

.red { background-color: red; }
.yellow { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="red">click</button>

或者只是一个类

$("button").on("click", function () {
    $(this).toggleClass("yellow");
});

button { background-color: red; }
.yellow { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>

如果你真的想使用 .css() 而不是你需要用状态保存一个变量

(function () {

  var state = false;
  $("button").on("click", function () {
      state = !state;
      $(this).css("backgroundColor", state ? "red" : "yellow");
  }).trigger("click");
  
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>