Javascript 数组中的随机十六进制颜色

我有下面的代码，并试图简单地使同位素网格中的每个项目有一个不同的十六进制值背景颜色。该代码在一定程度上起作用，但赋予同位素中的每个项目相同的颜色，而不是随机的颜色。非常感谢您的帮助，我不是JS专家，我已经从各种来源破解了以下内容，以了解当前状态

如果有人有一个更优雅的解决方案来替代修复，我洗耳恭听

干杯

JS

HTML

---

因为您的代码对随机数组执行了一次。

---

您需要将其放入循环中。

我宁愿尝试以下方法：

$(document).ready(function() {
  var colors = ["#E1A2AC","#FDC300","#56AF31", "#39B6AB"];
  $.each($('.colour-array'),function(ind,obj){
    var rand = Math.floor(Math.random()*colors.length);
    $(obj).css("background-color",colors[rand]);
  });
});

---

查看。

我刚刚意识到jQuery有时是多么棒。您可以向css函数提供“值提供程序”函数。勾选这个：

$(document).ready(function() {
  var colors = ["#E1A2AC","#FDC300","#56AF31", "#39B6AB"];
  $('.colour-array').css("background-color",function(){
    return colors[Math.floor(Math.random()*colors.length)];
  });
});

更新

编辑： 关于你最后的评论，我想出了一个可能的解决方案，但很难看的是将一个财产的价值复制到另一个。 我不喜欢这里提出的解决方案，因为它取决于jQuery的css在给定映射中处理属性的顺序。最好用下一个

编辑： 我有一个更好的主意，尽管这需要一些重构——首先计算每个对象的颜色，然后分配给所有对象。下面是代码：

$(document).ready(function() {
  var colors = ["#E1A2AC","#FDC300","#56AF31", "#39B6AB"];
    var colorMap = {};
    var colorArray = $('.colour-array');
    $.each(colorArray ,function(ind,obj){
        colorMap[ind] = colors[Math.floor(Math.random()*colors.length)];
    });
    var colorProvider = function(ind){
        return colorMap[ind];
    };
    colorArray.css({
        "background-color":colorProvider,
        "color":colorProvider
    });
});

---

为了实现您在评论中描述的目标，并考虑到您发布的HTML结构，我会走另一条路

JavaScript:

$(document).ready(function () {
  colorsCount = 4;
  var colorArray = $('.isotope-brick');
  $.each(colorArray, function (ind, obj) {
    $(obj).addClass('color' + Math.floor(Math.random() * colorsCount));
  });
});

每个颜色需要两个条目，但当需要稍微不同的色调时，它会提供弹性，因此没有问题：-

.isotope-brick.color0 .brick-overlay {
    background-color:#E1A2AC;
}

.isotope-brick.color0 .brick-info {
    color:#E1A2AC;
}

这里的工作示例

---

一句小小的评论：我把brick overlay和brick info id改成了CSS类，因为我想你会在这个网站上看到不止一篇文章。我强烈建议你也这样做。以下是。

您应该遍历.color数组列表，为每个数组选择随机颜色。很抱歉，大括号和圆括号出现语法错误。我刚修好。非常感谢！我知道这一定是可能的，有点专业知识。再次您好，进一步说，有可能实现以下目标吗？我想在同一个实例中影响2个css属性背景色和颜色。我可以复制部分代码以使其正常工作，但它将生成两种不同的颜色，而不是两个css属性的相同颜色。本质上，我需要这些链接每个项目？嗨，谢谢更新！然而，它不会强制html中.color数组的两个实例同步，它们仍然加载不同的颜色？此外，当我们将此应用于“背景色”和“颜色”时，文本不可见，因为它是与背景相同的颜色字体。我意识到这有点矛盾，因为这显然是一个与调用类两次（即运行脚本两次）有关的问题。我已经编辑了上面的HTML以向您展示我的设置。我不知道“同步”是什么意思，但有两个。颜色数组实例仍然可能加载相同的颜色。这是随机的。同一有限域中的两个随机数可能以非零概率产生相同的值。如果你想随机选择一种颜色，但每次都不同，你需要一种不同的算法。不，我不希望生成随机颜色，数组中只有4个十六进制值中的一个。但是，我希望在html中使用“.color array”的两个实例，并同时生成相同的颜色。这有意义吗？当多次调用“color array”类时，这可能是不可能的？谢谢。非常感谢您的帮助，这是一个完美的解决方案！祝你周末愉快。

$(document).ready(function () {
  colorsCount = 4;
  var colorArray = $('.isotope-brick');
  $.each(colorArray, function (ind, obj) {
    $(obj).addClass('color' + Math.floor(Math.random() * colorsCount));
  });
});

.isotope-brick.color0 .brick-overlay {
    background-color:#E1A2AC;
}

.isotope-brick.color0 .brick-info {
    color:#E1A2AC;
}