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

Posted 2023-02-21

【中文标题】将随机背景颜色应用于多个 DIV

【英文标题】：Applying a random background colour to multiple DIVs

【发布时间】：2012-05-19 09:32:23

【问题描述】：

我在页面上有一系列 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/

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

【问题讨论】：

似乎有什么问题（除了不引用.jump-response 元素并在每次迭代时在同一元素上设置背景）？

总是发布相关的 html，最好是 jsfiddle。

如果你正在改变.jump-response的背景，你不需要循环通过.main

【参考方案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

【讨论】：

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

这似乎有效。我添加了 jquery，这是结果jsfiddle.net/LmwYP/1

【参考方案2】：

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

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

此外，您正在循环遍历所有具有“main”类的元素，但随后对该元素什么也不做，所以我认为您可以删除循环代码。

【参考方案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);
  );
);

【参考方案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。