jQuery switch from CSS value of div

Question

This jQuery works on 3 divs - leftKey, rightKey and mentors. They are all aligned properly. The goal is that when the leftKey is clicked, mentors will cycle through a list of background colors. I defined the colors in an array; red then blue then green. I've gotten the keys to respond on click, but the switch doesn't work.

$(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;
                }
              }
            };
          });

It seems you're missing a closing parentheses after switch($("#mentors").css("background-color") — user196106
– user196106, Commented Feb 19, 2014 at 20:19
Also missing a closing parentheses after in case colors[0]: $("#mentors").css("background-color", colors[1]; of css() method — jasilva
– jasilva, Commented Feb 19, 2014 at 20:22
Alright. I think my problems are just caused by missing parentheses. What is the best program for finding & matching parentheses? I'm just using TextEdit on my mac — Jon Takagi
– Jon Takagi, Commented Feb 19, 2014 at 20:29
There's a list of good code editors for OS X: stackoverflow.com/questions/20533/mac-text-code-editor — user196106
– user196106, Commented Feb 19, 2014 at 20:32

Steve · Accepted Answer · 2014-02-19 21:21:36Z

To simplify your life quite a bit, some refactoring is in order. Try this:

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

mikelt21 · Accepted Answer · 2014-02-19 23:26:30Z

1

You can't do it that way because $("#mentors").css("background-color"); returns the color in rgb, ex. rgb(255, 0, 0)

You can achieve it through incrementing and decrementing an index. The benefit to doing it this way is that you can have as many colors as you want in the colors array without having to add another case in a switch statement:

$(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/

edited Feb 19, 2014 at 23:26

answered Feb 19, 2014 at 22:41

mikelt21

2,7784 gold badges26 silver badges35 bronze badges

2 Comments

Jon Takagi Over a year ago

What is the advantage of the index as a separate variable? I used a for loop, but when it reaches the end of the array it doesn't loop properly. e.g. clicking right key will go from red to blue, blue to green but not green to red. for(x < colors.length) if mentors = x color = x+1

mikelt21 Over a year ago

that way you can increment and decrement the index to get the left or right colors. you can add as many colors as you want in the color array without having to add another "case" to the "switch" statement. also you can repeat colors in the array if you need to do that, ex: ["red", "blue", "red", "green"], and you won't run into problems with duplicate color names. you can't do it the way you originally were because if you do alert($("#mentors").css("background-color"); in your original code you'll see that the output is in "rgb(###, ###, ###)" format. therefore, "rgb(255, 0, 0)" != "red".

Collectives™ on Stack Overflow

jQuery switch from CSS value of div

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related