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代码有机会完成执行之前，以及滑块标题是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

感谢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;
}

随机六角色

2 个答案: