随机十六进制颜色(Random hex colour)

我使用下面的代码来生成对我的网页上的某些元素的随机十六进制颜色。

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="<?php echo get_post_type( $post ) ?> <?php echo $termsString; ?> isotope-brick">

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

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

            <?php if ( has_post_thumbnail() ) { 
                      the_post_thumbnail();
                } ?>
        </a>
    </figure><!-- end figure -->

这一切都非常顺利，但是我希望把它扩大到该网站的另一个领域。 我在Royalslider插件内以同样的方式风格的标题框，我想这个随机的颜色延伸到上边距和颜色选择。 该网站是citizenfilms.co.uk/beta。 任何帮助这里将是非常感谢！

Answer 1:

您网站上的标题框，使用类的一个.rsGCaption ，是不是在当第一次加载页面的DOM。 它是由该JavaScript在页面的底部添加到DOM：

<script id="new-royalslider-init-code" type="text/javascript">
jQuery(document).ready(function($) {
    $('.new-royalslider-1').royalSlider({template:'default',image_generation:{lazyLoading:!0,imageWidth:'',imageHeight:'',thumbImageWidth:'',thumbImageHeight:''},thumbs:{thumbWidth:96,thumbHeight:72},autoPlay:{enabled:!0},width:'100%',height:'500px',autoScaleSliderWidth:960,autoScaleSliderHeight:750,slidesSpacing:0,imageScaleMode:'fill',imageScalePadding:0,arrowsNav:!1,globalCaption:!0,loopRewind:!0,keyboardNavEnabled:!0});
});
</script>

你的代码着色字幕一旦文件被加载发生之前，royalslider代码有机会执行完毕，因而，前滑块标题是DOM的一部分。 你只需要以使royalSlider代码标题颜色代码之前执行重新安排代码。 这里有一个选项：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.new-royalslider-1').royalSlider({template:'default',image_generation:{lazyLoading:!0,imageWidth:'',imageHeight:'',thumbImageWidth:'',thumbImageHeight:''},thumbs:{thumbWidth:96,thumbHeight:72},autoPlay:{enabled:!0},width:'100%',height:'500px',autoScaleSliderWidth:960,autoScaleSliderHeight:750,slidesSpacing:0,imageScaleMode:'fill',imageScalePadding:0,arrowsNav:!1,globalCaption:!0,loopRewind:!0,keyboardNavEnabled:!0});
        colorsCount = 4;
        $('.rsGCaption').addClass('color' + Math.floor(Math.random() * colorsCount));
    });
</script>

Answer 2:

感谢凯西规则的意见回复：我的定位自定义的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;
}

文章来源: Random hex colour