将随机背景颜色应用于多个DIV

Question

我在页面上有一系列DIV（每个都有相同的类）。在加载时，我想随机化每个DIV的颜色。

我想为给定的DIV选择一种颜色，然后为下一种颜色选择颜色，依此类推。

我发现了这篇文章：Apply random color to class elements individually?

我不明白jquery，但是我已经开始更改代码以反映我正在使用的类的名称：

$(document).ready(function() {
$('.main').each(function () {
    var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
    $(.jump-response).css("background-color", hue);
});
});

非常感谢进一步的帮助！

-

此处的代码示例：http://jsfiddle.net/ollyf/LmwYP/

我还应该添加随机背景颜色来自预设/预定的颜色列表。

Answer 1

我不知道你的HTML，但假设你的div定义如下。

<div class="jump-response">one</div>
<div class="jump-response">two</div>

代码中的主要问题是如何选择元素。

1。溶液

$(function() {
    $(".jump-response").each(function() {
        var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
         $(this).css("background-color", hue);
    });
});

jsFiddle Demonstration

2。溶液

您可以使用以下功能获取随机颜色

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

并使用

应用颜色

$(".jump-response").each(function() {
    $(this).css("background-color", get_random_color());
});

jsFiddle Demonstration

Answer 2

我相信您只需要在.jump-response

附近添加引号

$(".jump-response").css("background-color", hue);

此外，您使用“main”类循环遍历所有元素，但之后对该元素不执行任何操作，因此我认为您可以删除循环代码。

Answer 3

试试这个

$(document).ready(function() {
  $('.jump-response').each(function () {
      var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
      $(this).css("background-color", hue);
  });
});

Answer 4

要根据需要获取div的随机颜色，请在浏览器上将其设为书签：

javascript:jQuery("div").each(function() {var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';jQuery(this).css("background-color", hue);});

书签需要打开“javascript：”（不带引号），否则就是jQuery。