jquery - 随机十六进制颜色

Question

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

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 代码有机会完成执行之前，因此，在 slider 标题成为 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>