Question

这个jQuery适用于3个div - 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;
                }
              }
            };
          });

Answer 1

为了简化你的生活，我们需要进行一些重构。试试这个：

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

Answer 2

你不能这样做因为$("#mentors").css("background-color");返回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]);
    });
});

DEMO：http://jsfiddle.net/w3h46/4/

jQuery从div的CSS值切换

2 个答案: