上下键循环播放数组

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

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

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

Answer 1

1.使用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.在内部操作数组

另一种有趣（ 不太复杂 ）的方法，不使用当前的索引计数器
是通过简单地将最后一个键推到第一个位置（或反向，从头到尾）来操纵数组 ，并始终获得[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

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

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

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

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