0

I have an array of colors. using the up and down arrow keys, I would like to loop through the array and add the current array value as a class to a div. 

var colors = [ 
            "red", 
            "green",
            "blue"
];

I would like to store the present value as a variable and use the jQuery .addClass to append a the current class to a div. As a jQuery newcomer, any help here would be fantastic!

Brock
  • 173
  • 3
  • 13
  • 3
    Just for giggles, can you tell us what you have tried? – Jay Blanchard Apr 28 '14 at 21:28
  • 1
    If you want help fixing your code, you have to post what you've written. We're not going to do your initial work for you. – Barmar Apr 28 '14 at 21:28
  • 1
    Not because we want to laugh at your attempts, just so we can see what you're trying to do, and how we can help. And to verify you've made at least some effort. – David Thomas Apr 28 '14 at 21:29

3 Answers3

2

1. Looping an index counter with Reminder %

http://jsbin.com/howon/5/edit

var colors = ["red", "green", "blue"],
    i = 0,
    n = colors.length;

$(document).keydown(function(e){
  var k = e.which; 
  if(k==38||k==40){
    i = (k==38? ++i : --i) <0? n-1 : i%n;
    $('#test').attr('class', colors[i]);
  } 
});

2. Manipulating internally the Array

Another interesting (less complicated) way to do it, without using a current index counter
is to manipulate the Array it-self by simply pushing the last key to the first position (or inverse, first to last) and always get the [0] index key:

http://jsbin.com/jojupo/3/edit

var colors = ["red", "green","blue"];

$(document).keydown(function(e){
  var k = e.which;
  if(k==38||k==40){
    if      (k==38) colors.push(colors.shift());
    else if (k==40) colors.unshift(colors.pop());
    $('#test').attr('class', colors[0]);
  }
});
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • @Brock added another interesting and less *mathy* example. – Roko C. Buljan Apr 28 '14 at 23:04
  • Thank Roko, would it be possible to add a button click as an "or" statement to that? For instance, if(k==38) or a button with the class of .up is clicked, then run the colors.push function? – Brock Apr 29 '14 at 15:00
  • @Brock Put the `colors.push` and `colors.unshift` lines into separate functions and call them whenever you need, on keyup, on a buttion click etc... like: `function nextColor(){colors.push( colors.shift(); return color[0];}` and than you just call that function which will return the needed string: `nextColor(); // Green` – Roko C. Buljan Apr 29 '14 at 19:44
0

Here is the code for registering the key presses, this should help get you started:

$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       alert( "left pressed" );
       return false;
    }
});

$(document).keydown(function(e){
    if (e.keyCode == 38) { 
       alert( "up pressed" );
       return false;
    }
});

$(document).keydown(function(e){
    if (e.keyCode == 39) { 
       alert( "right pressed" );
       return false;
    }
});

$(document).keydown(function(e){
    if (e.keyCode == 40) { 
       alert( "down pressed" );
       return false;
    }
});
APAD1
  • 13,509
  • 8
  • 43
  • 72
0

To help you along a bit, assuming your markup is

<div id="myDiv"></div>

, the following JavaScript will loop through the color array and set the color.

var $myDiv = $('#myDiv');

for (var i = 0; i < colors.length; i++) {
  $myDiv.attr('class', colors[i]);
}

This, combined with the answer above about registering key presses, should get you most of the way there. I suggest using jQuery's .attr() method rather than jQuery's .addClass() method because otherwise you'll need to remove all previous classes each time you change the color.

unruthless
  • 507
  • 5
  • 8