Question

我有以下代码，我试图简单地让同位素网格中的每个项目具有不同的Hex值背景颜色。此代码在一定程度上起作用，但同位素中的每个项目都是相同的颜色，而不是随机的颜色。任何帮助非常感谢，我不是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

因为您的代码对随机数组执行了一次。你需要把它放在循环中。

Answer 2

我宁愿尝试类似的事情：

$(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 3

我刚刚意识到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 }); });

Answer 4

为了实现您在评论中描述的目标并考虑到您发布的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 ID更改为CSS类，因为我认为您将在该网站上发布多篇文章。我强烈建议你这样做。这是the why。

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

4 个答案: