Question

我有任务 - 附加一些随机背景色。

$(function(){
        var html = [];
        for (var i=0; i<50; i++) {
        html.push('<div>');
        html.push('</div>');
        }
    $('#ten-square').append(html.join(''));
        $('#ten-square').each(function() { 
        var random_color = '#' + Math.floor((Math.random() * (999999 - 100000) + 100000));
        $('#ten-square div').css({'background-color' : random_color});
        });
    })

这些块有任何重新加载不同的颜色，但它们都具有相同的颜色。请帮帮我。 1块（红色），2块（绿色）等

Answer 1

$('#ten-square div')选择器没有按照您的想法进行操作：而不是拉动循环中的当前div，而是在所有{div上设置背景颜色1}}在$('#ten-square')下面。

您正在寻找的是这样的东西，它在您循环时对元素进行操作：

$('#ten-square').each(function(i, el) 
{ 
    var random_color = '#' + Math.floor((Math.random() * (999999 - 100000) + 100000));
    $(el).css({'background-color' : random_color});
});

此外，您使用该随机化方法忽略了一堆可能的颜色（#AAAAAA和#FFFFFF等之间的任何颜色）。我尝试在0到255之间选择3个随机数，然后使用rgb()颜色代替。

Answer 2

试试这段代码:)

$(function(){
    var html = [];
    for (var i=0; i<50; i++) {
        html.push('<div>');
        html.push('</div>');
    }
    $('#ten-square').append(html.join(''));
    $('#ten-square div').each(function() { 
        var random_color = '#' + Math.floor(Math.random()*16777215).toString(16);
        $(this).css({'background-color' : random_color});
    });
})

#ten-square div {
  height:20px;
  width:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ten-square"></div>

Jquery - 随机背景

2 个答案: