Random hex colour

问题:

I am using the following code to generate a random hex colour on certain elements on my page.

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 -->

This all works great, but I want to extend it to another area of the site. I have a caption box styled in the same way inside the Royalslider plugin, and I would like to extend this random colour to the top margin and colour selectors. The site is citizenfilms.co.uk/beta. Any help here would be most appreciated!

回答1:

That caption box on your site, the one that uses the class .rsGCaption, is not in the DOM when the page first loads. It is added to the DOM by this javascript at the bottom of the page:

<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>

Your code to color the caption is happening as soon as the document is loaded, BEFORE the royalslider code has a chance to finish executing, and, therefore, before the slider caption is part of the DOM. You just need to rearrange the code so that the royalSlider code executes before the caption coloring code. Here is one option:

<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>

回答2:

Thanks to Casey Rule for the advice re: positioning my custom JS code BELOW that of the plugin JS. That is the key here.

Once this is done it's simply a case of replacing the original css with the following.

Cheers Casey!

/**** 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;
}