JSFiddle - React, Tailwind, and code Playground

by jorgeluis

HTML

<h1>Random items on refresh</h1>
<p>displays a random element from the set of children of the selected element</p>

<div class="bucket sym-widget">
    <div class="clearfix"id="sb-promo">
        <a href="#">
            <img src="http://placehold.it/180_x_340/006699" alt="thing1">            
        </a>
        <a href="#">
            <img src="http://placehold.it/180_x_340/666666" alt="thing2">            
        </a>
        <a href="#">
            <img src="http://placehold.it/180_x_340/111111" alt="thing3">            
        </a>
    </div>
</div>

CSS

#sb-promo a { display:none }

JavaScript

function randomPromo(divId) {
    // rotating the promo image on refresh. Waiting for new images from client.
    var promos = $(divId).children('a');
    var tot = promos.length;
     if (tot > 1) {
        var randNum = Math.round(Math.random()*(tot-1));
        promos.eq(randNum).show();
    } else {
        $(promos).show();
    }
}


$(function(){
    randomPromo("#sb-promo");
})