我有以下代码，并试图简单地使同位素网格中的每个项目具有不同的十六进制值背景色。该代码在一定程度上起作用，但是赋予同位素中的每个项目相同的颜色，而不是随机的颜色。非常感谢任何帮助，我不是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>
为了实现您在注释中描述的目标并考虑到您发布的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-infoID添加到CSS类，因为我认为你将不得不在网站上一个以上的文章。我强烈建议您这样做。这就是原因。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句