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

Question

我页面上有一系列相同类别的DIV。在页面加载时，我希望随机选择每个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/

同时我还应该补充说明，随机背景颜色来自预设/确定的颜色列表。

- Olly F

---

除了没有引用.jump-response元素并在每次迭代中设置相同元素的背景之外，似乎还有什么问题？ - adeneo

始终发布相关的HTML代码，最好提供一个JSFiddle。 - amit_g

如果您正在更改 .jump-response 的背景，您不需要遍历 .main。 - Imdad

Answer 1

我不知道你的HTML代码，但是假设你的

标签定义如下：

<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演示

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演示

- dknaack

---

这对我似乎不起作用。显然我错过了一些重要的东西！这是我的HTML和CSS（在我添加jQuery之前）。请注意，我正在使用bootstrap，因此我省略了行、容器等的CSS。另外，DIV是通过WordPress循环呈现的。也许这就是问题所在？ - Olly F

这似乎有效。我已经添加了jQuery，这是结果http://jsfiddle.net/LmwYP/1/。 - dknaack

Answer 2

我相信你只需要在 .jump-response 周围加上引号。

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

另外，你正在遍历所有具有类名为'main'的元素，但是对该元素没有进行任何操作，所以我认为你可以删除循环代码。

- Adam Albrecht

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

- Imdad

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。

- Kari Kääriäinen