在随机计时器上设置随机背景颜色答案

【问题标题】：Set random background colors on random timer在随机计时器上设置随机背景颜色
【发布时间】：2018-02-18 06:11:36
【问题描述】：

我正在尝试使用 forEach 循环设置随机背景颜色，但所有 div 都使用相同的计时器获得相同的背景颜色。

这是 codepen 的链接。 https://codepen.io/McKern/pen/gvoZRp

var bgColors = [
        "#260CE8",
        "#7D1AFF",
        "#A90CE0",
        "#385EFF",
        "#0F0559",
        "#FF37EB"
    ];

    $('.box').each(function(){
        timer = setInterval( function() {
            randomBgColor = bgColors[Math.floor(Math.random() * bgColors.length)];
            randomNum = Math.floor(Math.random() * ((25-10)+1) + 10);
            box = $('.box');
            $('.box').css('backgroundColor', randomBgColor)
        }, 1000);
    });

【问题讨论】：

将$('.box').css('backgroundColor', randomBgColor) 换成$(this).css('backgroundColor', randomBgColor)
$('.box') 选择 all 框元素，因此 $('.box').css 会更改所有框元素的颜色。 NewToJs 是对的，使用this 会在每个循环中选择当前项
这里是JsFiddle Demo 我也将区间移到了循环之外。
不是所有背景颜色一致变化，而是根本不变化
那行得通。谢谢！

标签： javascript arrays

【解决方案1】：

您也可以使用jQuery.each()中的值

并更改笔中最后一行的第一行和第三行。

$('.box').each(function(i, l){
  timer = setInterval( function() {
    randomBgColor = bgColors[Math.floor(Math.random() * 
bgColors.length)];
    randomNum = Math.floor(Math.random() * ((25-10)+1) + 10);
    box = $('.box');
    $(l).css('backgroundColor', randomBgColor)
  }, 1000);
});

【讨论】：