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

Posted 2023-05-08

【中文标题】循环使用多种背景颜色 - 寻求代码改进

【英文标题】：Cycle through multiple background colors - Seeking code improvement

【发布时间】：2013-04-30 20:02:49

【问题描述】：

看看我的小提琴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 而没有插件来完成这项任务。

感谢您的帮助。

【参考方案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%bevaluates to 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 |
   ...

【讨论】：

让 jQuery 循环遍历 rgba 颜色值中的数字也会很有趣！

Moonwave99：这真是太棒了。在我发布之后，我想到了创建一个数组并循环遍历它，然后应用颜色，但是你所做的超出了我的能力范围。关于颜色 [(counter++)%colors.length] 的问题。我理解 % 的使用，但完全理解这一点并不那么清楚。你能简要解释一下吗？您是根据 counter++ 的剩余部分和数组长度创建数组的索引吗？

最后跟进：我的原始代码很糟糕吗？没那么好但也没那么差？可怜？

我还注意到，当我尝试放置 console.log(colors[(counter++)%colors.length]);它完全弄乱了代码，因此无法正常运行。以前没有使用 console.log 看到这个

@max7 这是因为即使在console.log 语句中，使用counter++ 也会增加计数器 - 如果您想检查幕后发生的事情，请将其保存到临时变量中。您的代码还不错，只是在您想使用更多颜色时无法很好地扩展，因为您每次都必须添加一个完整的函数；使用数组 ^^

【参考方案2】：

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

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

注意添加到 div 的 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。

【讨论】：

这也很好，虽然当你第一次点击链接时它似乎跳过了第一种颜色#eeeeee。

我修复了它：将 data-index 中的初始值更改为 -1，一切都很好:)

谢谢！问题：既然我们正在处理点击事件，我们真的需要有 $(document).ready(etc ..) 吗？我们不能只声明我们的数组和其他变量，然后以 $('.clickMe').on("click", ...) 开头吗？或者这会被认为是一种不好的做法？

好吧$(document).ready(function()); 表示DOM 已准备好并已加载，并且您没有向不存在的对象添加处理程序或访问尚未在DOM 中的元素。虽然现在这个脚本的语法类似于$(function())

您可以使用i = ++i % ln; 和链接jQuery $colorDiv.css("background-color", colors[i]).data("index", i); See Fiddle 来简化一点