Javascript jQuery从div的CSS值切换

这个jQuery在3个分区上工作——leftKey、rightKey和导师。它们都正确对齐。 目标是当点击leftKey时，导师将循环浏览背景颜色列表。我定义了数组中的颜色；红色、蓝色、绿色。我已经得到了按键，可以在点击时做出反应，但开关不起作用

$(document).ready(function() {
          var colors = [ "rgb(128, 0, 0)", "rgb(255, 0, 0)", "rgb(0, 0, 255)", "rgb(0, 128, 0)"];
          //burgundy, red, blue, green
          var mentors = $("#mentors");
          $("#leftKey").click(function() {
            if(mentors.css("background-color") == colors[0]) {
              mentors.css("background-color", colors[colors.length-1]);
            } else {
              for(var x = 0; x < colors.length; x++) {
                if( mentors.css("background-color") == colors[x]) {
                  mentors.css("background-color", colors[x-1]);
                }
              }
            };
          });
          $("#rightKey").click(function() {
            if( mentors.css("background-color") == colors[colors.length-1]){
              mentors.css("background-color", colors[0]);
            } else {
              for(var x = 0; x < colors.length; x++) {
                if( mentors.css("background-color") == colors[x] ) {
                  mentors.css("background-color", colors[x+1]);
                  return false;
                }
              }
            };
          });

$（文档）.ready（函数（）{
变量颜色=[“rgb（128,0,0）”，“rgb（255,0,0）”，“rgb（0,0255）”，“rgb（0,128,0）”；
//勃艮第、红色、蓝色、绿色
var导师=$（“#导师”）；
$（“#leftKey”）。单击（函数（）{
if（mentors.css（“背景色”）==颜色[0]）{
css（“背景色”，colors[colors.length-1]）；
}否则{
对于（var x=0；x

为了简化您的生活，需要进行一些重构。请尝试以下方法：

var colors = [ "red", "blue","green"],
    getColor = function (leftRight, currentColor) {
        var newColorIndex
            isLeft = leftRight === "left";
        if (currentColor === colors[0]) {
            newColorIndex = (isLeft) ? 2 : 1;
        } else if (currentColor === colors[1]) {
            newColorIndex = (isLeft) ? 0 : 2;
        } else {
            newColorIndex = (isLeft) ? 1 : 0;
        }
        return colors[newColorIndex];
    },
    colorSwitch = function (leftRight) {
        var mentors = $("#mentors"),
            currentColor = mentors.css("background-color"),
            newColor = getColor(leftRight, currentColor);
        $("#mentors").css("background-color", newColor);
    };
$(document).ready(function() {
    $("#leftKey").click(function() {
        colorSwitch("left");
    });
    $("#rightKey").click(function() {
        colorSwitch("right");
    });
});

---

您不能这样做，因为

$（“#导师”）.css（“背景色”）

返回rgb中的颜色，例如

rgb（255，0，0）

您可以通过增加和减少索引来实现这一点。这样做的好处是，您可以在

colors

数组中拥有任意数量的颜色，而无需在switch语句中添加另一个大小写：

$(document).ready(function() {
    var index = 0;
    var colors = [ "red", "blue", "green" ];
    $("#mentors").css("background-color", colors[index]);
    $("#leftKey").click(function() {
        index -= 1;
        if (index < 0)
            index = colors.length - 1;
        $("#mentors").css("background-color", colors[index]);
    });
    $("#rightKey").click(function() {
        index += 1;
        if (index >= colors.length)
            index = 0;
        $("#mentors").css("background-color", colors[index]);
    });
});

$（文档）.ready（函数（）{
var指数=0；
变量颜色=[“红色”、“蓝色”、“绿色”]；
$（“#导师”）.css（“背景色”，颜色[索引]）；
$（“#leftKey”）。单击（函数（）{
指数-=1；
如果（指数<0）
索引=颜色。长度-1；
$（“#导师”）.css（“背景色”，颜色[索引]）；
});
$（“#rightKey”）。单击（函数（）{
指数+=1；
如果（索引>=colors.length）
指数=0；
$（“#导师”）.css（“背景色”，颜色[索引]）；
});
});

---

演示：

似乎在

开关（$（“#导师”）.css（“背景色”）

在

案例颜色[0]：$（“#导师”）.css（“背景色”，颜色[1]；

的methodOK。我想我的问题只是由于缺少括号造成的。查找和匹配括号的最佳程序是什么？我只是在Mac上使用TextEdit。OS X有一个很好的代码编辑器列表：索引作为单独变量有什么好处？我使用了for循环，但当它到达数组的末尾时，它就消失了sn无法正确循环。例如，单击右键将从红色变为蓝色，从蓝色变为绿色，但不会从绿色变为红色。对于（xalert（$（“#导师”）.css（“背景色”），您将看到输出是正确的“rgb（#####，###，###，####）格式。因此，“rgb（255，0，0）”！=“红色”。