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

jQuery开关不改变CSS (3种颜色)是指在使用jQuery库时，通过点击开关按钮来切换元素的背景颜色，但不改变CSS样式表中定义的颜色。下面是三种实现这个功能的方法：

方法一：使用toggleClass()方法

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;
}

在这个例子中，通过toggleClass()方法来切换box元素的blue类。当点击开关按钮时，如果box元素没有blue类，则添加该类，如果已经有blue类，则移除该类。通过定义.blue类的背景颜色为蓝色，实现了切换背景颜色的效果。

方法二：使用data属性

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");
  }
});

在这个例子中，通过data属性来保存box元素的颜色状态。初始状态为红色，点击开关按钮时，根据当前颜色状态来改变背景颜色，并更新data属性的值。

方法三：使用数组和索引

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]);
});

在这个例子中，通过定义一个颜色数组和一个索引变量来实现切换背景颜色的功能。每次点击开关按钮时，索引加1并取余数组长度，从而循环切换颜色。

以上是三种实现jQuery开关不改变CSS的方法，根据具体需求选择适合的方法即可。