上下键来循环遍历数组

Question

我有一系列颜色。使用向上和向下箭头键，我想循环遍历数组并将当前数组值作为类添加到div。

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

我想将当前值存储为变量，并使用jQuery .addClass将当前类附加到div。作为一个jQuery新手，这里的任何帮助都会很棒！

Answer 1

1。使用提醒 %

循环索引计数器

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。在内部操作数组

另一种有趣的（不太复杂的）方式，不使用当前索引计数器
通过简单地将最后一个键推到第一个位置（或反向，从头到尾）并始终得到[0]来操纵数组它自己索引键：

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

Answer 2

以下是注册按键的代码，这应该有助于您入门：

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

Answer 3

为了帮助您，假设您的标记是

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

，以下JavaScript将遍历颜色数组并设置颜色。

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

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

这与上面关于注册按键的答案相结合，应该可以帮助你完成大部分工作。我建议使用jQuery的.attr（）方法而不是jQuery的.addClass（）方法，否则每次更改颜色时都需要删除所有以前的类。