jquery - 循环使用多种背景颜色 - 寻求代码改进

Question

看看我的 fiddle here

这是有问题的js:

 $(document).ready(function() {
    $('.clickMe').toggle(
        function() {
            $('#coloredDiv').css({
                "background-color": "#eeeeee"
            })
        }, function() {
            $('#coloredDiv').css({
                "background-color": "#00ff00"
            })
        }, function() {
            $('#coloredDiv').css({
                "background-color": "#ff0000"
            })
        }, function() {
            $('#coloredDiv').css({
                "background-color": "#000000"
            })
        });
});

目标:每次单击链接(“单击我”)时，#coloredDiv 的背景颜色应按提供的顺序更改为以下颜色之一:#eeeeee、#00ff00、#ff0000、#000000 。到达最后一种颜色后，如果再次单击链接，则循环应从列出的第一种颜色重新开始。

该代码可以工作，但我想知道:当前形式的代码是否值得尊敬，还是不太好？我做出了错误的选择吗？还可以用什么其他方式编写来实现相同的结果，但可能稍微更好(即更优雅)？

最后，您会注意到页面加载时该正方形没有默认颜色。我曾考虑过在加载时默认为 #eeeeee 的想法，但我意识到我需要使用条件语句来检查当前颜色，然后根据情况应用适当的颜色。任何有关如何编写本文的指导将不胜感激。

请注意，我想仅使用 jQuery 而不使用插件来完成此任务。

感谢您的帮助。

Answer 1

稍微干燥一下:

  var counter = 0;
  var colors = [
    "#eeeeee",
    "#00ff00",
    "#ff0000",
    "#000000"      
  ];

  var $div = $('#coloredDiv');

  $('.clickMe').click(function(){

    $div.css({
        "background-color": colors[(counter++)%colors.length]
    })

  });

使用模运算符 [%]，您可以在不超出数组范围的情况下循环数组 [a%b计算结果为 b-1至多]。

编辑:您只需增加计数器，然后模数将在每次 array.length 迭代时将其“重置”为 0 [实际上不会重置，只是表达式的结果会看起来喜欢]。在维基百科中搜索模运算符，您会发现很多有趣的属性。

  i | (i++)%arr.length
---------
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 0 |
| 5 | 1 |
| 6 | 2 |
| 7 | 3 |
   ...