循环使用多种背景颜色 - 寻求代码改进 [英] Cycle through multiple background colors - Seeking code improvement

问题描述

查看我的小提琴此处

  $（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完成这个任务，不需要插件。
$ b

感谢您的帮助。

解决方案

烘干一下：

  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 ]。 p>

编辑：你只需增加计数器，然后模数将重设为0每个 array.length 迭代[它实际上不会被重置，只是表达式的结果看起来像]。搜索维基百科的modulo运算符，你会发现很多有趣的属性。

  i | （i ++）％arr.length 
 --------- 
 | 0 | 0 | 
 | 1 | 1 | 
 | 2 | 2 | 
 | 3 | 3 | 
 | 4 | 0 | 
 | 5 | 1 | 
 | 6 | 2 | 
 | 7 | 3 | 
 ... 
  

Check out my fiddle here

Here is the js in question:

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

The goal: each time the link is clicked ("click me") the background color of the #coloredDiv should change to one of the following colors in the order provided: #eeeeee, #00ff00, #ff0000, #000000 . Once the last color is reached, if the link is clicked again, the cycle should start over from the first color listed.

The code works but I would like to know: is the code in its current form respectable or is it not so good? Am I making poor choices? What other way could this be written to achieve the same result but in perhaps a slightly better (i.e. more elegant) way?

Lastly, you'll notice that upon page load the square has no default color. I've toyed with the idea of defaulting to #eeeeee upon load but I realize that I would then need to account for this using a conditional statement to check the current color and then apply the appropriate color depending on the situation. Any guidance on how to approach writing this would be greatly appreciated.

Please note that I want to accomplish this task using only jQuery and no plugins.

Thanks for the help.

解决方案

DRYing it a bit:

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

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

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

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

  });

With the modulo operator [%], you loop over the array without exceeding its bounds [a%bevaluates to b-1 at most].

EDIT: you just increment the counter, then the modulo will "reset" it to 0 every array.length iterations [it won't be reset actually, just the result of the expression will look like]. Search wikipedia for modulo operator, you will find out a lot of interesting properties.

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

这篇关于循环使用多种背景颜色 - 寻求代码改进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！