5

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

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

我发现这篇文章：将随机颜色单独应用于类元素？

我不懂 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/

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

4

4 回答 4

24

我不知道您的 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 演示

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

于 2012-05-10T18:45:12.733 回答
0

尝试这个

$(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);
  });
});
于 2012-05-10T18:49:41.590 回答
0

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

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

此外，您正在使用“main”类遍历所有元素，但随后对该元素不做任何事情，所以我认为您可以删除循环代码。

于 2012-05-10T18:44:26.697 回答
0

要按需获取 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。

于 2017-03-04T11:45:37.030 回答