jquery开关不改变css (3种颜色)

HTML:
<button id="toggleBtn">开关</button>
<div id="box"></div>

CSS:
#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript:
$("#toggleBtn").click(function() {
  $("#box").toggleClass("blue");
});

.blue {
  background-color: blue !important;
}

HTML:
<button id="toggleBtn">开关</button>
<div id="box" data-color="red"></div>

CSS:
#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript:
$("#toggleBtn").click(function() {
  var color = $("#box").data("color");
  if (color === "red") {
    $("#box").css("background-color", "blue");
    $("#box").data("color", "blue");
  } else if (color === "blue") {
    $("#box").css("background-color", "green");
    $("#box").data("color", "green");
  } else if (color === "green") {
    $("#box").css("background-color", "red");
    $("#box").data("color", "red");
  }
});

HTML:
<button id="toggleBtn">开关</button>
<div id="box"></div>

CSS:
#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript:
var colors = ["red", "blue", "green"];
var currentIndex = 0;

$("#toggleBtn").click(function() {
  currentIndex = (currentIndex + 1) % colors.length;
  $("#box").css("background-color", colors[currentIndex]);
});