1

在这里查看我的小提琴

这是有问题的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 而没有插件来完成这项任务。

谢谢您的帮助。

4

2 回答 2

3

稍微干燥一下：

  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 |
   ...
于 2013-05-07T00:34:03.450 回答
2

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

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

注意data添加到 div 的属性。

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

工作小提琴就在这里。

于 2013-05-07T01:39:42.013 回答