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

Question

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

如果有人有更优雅的解决方案来替代修复，我会全力以赴！

干杯

JS

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

HTML

<article class="<?php echo $termsString; ?> isotope-brick">

    <a href="<?php the_permalink(); ?>">
    <div id="brick-overlay" class="colour-array">
            <h2><?php the_title(); ?></h2>
            <h5><?php the_excerpt(); ?></h5>
            <h4><?php $category = get_the_category(); echo $category[0]->cat_name;?></h4>
    </div><!-- end brick-overlay -->
    </a>

    <div id="brick-info">
            <h2><?php the_title(); ?></h2>
            <h4 class="colour-array"><?php $category = get_the_category(); echo $category[0]->cat_name;?></h4>
    </div><!-- end brick-info -->

        <?php if ( has_post_thumbnail() ) { 
                  the_post_thumbnail();
            } ?>
</article>

Answer 1

为了实现您在 cmets 中描述的目标并考虑到您发布的 HTML 结构，我会采用其他方式。

JavaScript：

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

和 CSS（每种颜色需要两个条目，但是当需要稍微不同的阴影时它会提供弹性，所以没问题 :-)

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

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

这里的工作示例jsfiddle。

一个小评论：我将brick-overlay 和brick-info ids 更改为CSS 类，因为我认为您将在网站上拥有不止一篇文章。我强烈建议你也这样做。这是the why。

Answer 2

因为您的代码为随机数组执行了一次。 您需要将其放入循环中。

Answer 3

我宁愿尝试类似的东西：

$(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]);
  });
});

检查fiddle。

Answer 4

我只是不时意识到 jQuery 是多么的棒。您可以为 css 函数 (docs) 提供“价值提供者”函数。检查这个：

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

更新jsfiddle。

编辑： 关于您的最后评论，我想出了一个可能的解决方案，但非常丑陋的是将一个属性的值复制到另一个属性中。 jsfiddle。 我不喜欢这里提出的解决方案，因为它取决于 jQuery 的 css 处理给定映射中的属性的顺序。最好使用下一个。

编辑： 我有一个更好的主意，虽然它需要一些重构 - 首先计算每个对象的颜色，然后分配给所有对象。 jsfiddle 和代码来了：

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