Question

查看我的小提琴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 |
   ...

Answer 2

不知道更好与否，但请看看以下内容：

<div id="coloredDiv" data-index="-1"></div>

请注意添加到div。{/ p>的data属性

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

$(document).ready(function () {
    $colorDiv = $('#coloredDiv');
    ln = colors.length;
    $('.clickMe').on("click", function () {
        var i = $colorDiv.data("index");
        ++i;
        if (i >= ln) i = 0;
        $colorDiv.css({
            'background-color': colors[i]
        });
        $colorDiv.data("index", i);
    });
});

工作小提琴是here。

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

2 个答案: