随机六角色

我使用以下代码在我的页面上的某些元素上生成随机的hex颜色。

CSS

/**** Random hex values ****/ .isotope-brick.color0 .brick-overlay { background-color: #E1A2AC; } .isotope-brick.color0 .brick-info { color: #E1A2AC; } .isotope-brick.color1 .brick-overlay { background-color: #FDC300; } .isotope-brick.color1 .brick-info { color: #FDC300; } .isotope-brick.color2 .brick-overlay { background-color: #56AF31; } .isotope-brick.color2 .brick-info { color: #56AF31; } .isotope-brick.color3 .brick-overlay { background-color: #39B6AB; } .isotope-brick.color3 .brick-info { color: #39B6AB; } 

JS

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

HTML

 <figure class="  isotope-brick"> <a href="https://stackoverflow.com/questions/26888671/random-hex-colour/"> 
 
 
 
cat_name;?>
 
 
 
 
cat_name;?>
 
    

这一切都很好，但我想将它扩展到网站的另一个区域。 我在Royalslider插件中以相同的方式设置了一个标题框，我想将这种随机颜色扩展到顶部边距和颜色选择器。 该网站是citizenfilms.co.uk/beta。 这里的任何帮助将非常感谢！

Answer 1

您网站上的标题框（使用类.rsGCaption标题框）在首次加载页面时不在DOM中。 它通过页面底部的这个javascript添加到DOM中：

在加载文档之后，在royalslider代码有机会完成执行之前，以及滑块标题是DOM的一部分之前，您的代码将为标题着色。 您只需重新排列代码，以便royalSlider代码在标题着色代码之前执行。 这是一个选项：

Answer 2

感谢Casey Rule的建议：将我的自定义JS代码定位为插件JS的代码。 这是关键。

完成此操作后，只需用以下内容替换原始css即可。

干杯凯西！

 /**** Random hex values ****/ .isotope-brick.color0 .brick-overlay { background-color: #E1A2AC; } .isotope-brick.color0 .brick-info { color: #E1A2AC; } .rsGCaption.color0 { border-color: #E1A2AC; color: #E1A2AC; } .isotope-brick.color1 .brick-overlay { background-color: #FDC300; } .isotope-brick.color1 .brick-info { color: #FDC300; } .rsGCaption.color1 { border-color: #FDC300; color: #FDC300; } .isotope-brick.color2 .brick-overlay { background-color: #56AF31; } .isotope-brick.color2 .brick-info { color: #56AF31; } .rsGCaption.color2 { border-color: #56AF31; color: #56AF31; } .isotope-brick.color3 .brick-overlay { background-color: #39B6AB; } .isotope-brick.color3 .brick-info { color: #39B6AB; } .rsGCaption.color3 { border-color: #39B6AB; color: #39B6AB; }