vendredi 1 septembre 2017

No duplicates in jQuery Logo function

I am trying to make a script to change the logo's and links of 8 logo's on the bottom of my webpage.

However my current script is creating a lot of duplicates where I only want 1 logo of the same company to be displayed at the same time.

What should I do to remove duplicates?

HTML:

<div class="bbe-container-wrap sponsorlogo" data-wrapper-id="TEYYD">
<div class="bbe-container container " data-container-id="IDXBz">
    <div class="row row-eq-height">
        <div class="col-md-3 img1" data-column-id="ZfWwM">
            <div class="bbe-col-content-wrap">
                <div class="bbe-component-block" data-block-id="RSyVB">
                    <a href="https://www.atvise.nl"><img src="/wp-content/uploads/2017/09/huis-ter-duin-logo-hotel1-1024x768.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <div class="col-md-3 img2" data-column-id="tLyPm">
            <div class="bbe-col-content-wrap">
                <div class="bbe-component-block" data-block-id="UbKko">
                    <a href="https://www.atvise.nl"><img src="/wp-content/uploads/2017/09/Dental4U-300x109.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <div class="col-md-3 img3" data-column-id="lIvMg">
            <div class="bbe-col-content-wrap">
                <div class="bbe-component-block" data-block-id="ILkzc">
                    <a href="https://www.atvise.nl"><img src="/wp-content/uploads/2017/09/van-der-Wiel-logo.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <div class="col-md-3 img4" data-column-id="AUEmT">
            <div class="bbe-col-content-wrap">
                <div class="bbe-component-block" data-block-id="WgxcB">
                    <a href="https://www.atvise.nl"><img src="/wp-content/uploads/2017/08/Booming-logo.jpg" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-eq-height">
        <div class="col-md-3 img5" data-column-id="LMXqR">
            <div class="bbe-col-content-wrap">
                <div class="bbe-component-block" data-block-id="bleWv">
                    <a href="https://www.atvise.nl"><img src="/wp-content/uploads/2017/09/Horesca-logo.png" alt=""></a>
                </div>
            </div>
        </div>
        <div class="col-md-3 img6" data-column-id="laEKc">
            <div class="bbe-col-content-wrap">
                <div class="bbe-component-block" data-block-id="cNGGz">
                    <a href="https://www.atvise.nl"><img src="/wp-content/uploads/2017/09/home.png" alt=""></a>
                </div>
            </div>
        </div>
        <div class="col-md-3 img7" data-column-id="oLIWV">
            <div class="bbe-col-content-wrap">
                <div class="bbe-component-block" data-block-id="YCAcz">
                    <a href="https://www.atvise.nl"><img src="/wp-content/uploads/2017/09/happazz_logo_facebook-01.png" alt=""></a>
                </div>
            </div>
        </div>

        <div class="col-md-3 img8" data-column-id="mIwTu">
            <div class="bbe-col-content-wrap">
                <div class="bbe-component-block" data-block-id="tjCGs">
                    <a href="https://www.atvise.nl"><img src="/wp-content/uploads/2017/09/ricoh.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery:

This is the script I made to display a random logo with link. (not happy with the lenght)

jQuery(document).ready(function($){

setInterval(function(){ 
    var number = Math.floor((Math.random() * 4) + 1);
    var number2 = Math.floor((Math.random() * 4) + 5);
    var item1 = $('.sponsorlogo .img'+number);
    var item2 = $('.sponsorlogo .img'+number2);

    var a1 = $(item1).find('a');
    var a2 = $(item2).find('a');

    var t1 = $(item1).find('img');
    var t2 = $(item2).find('img');

    var image = new Array ();
    image[0] = "/wp-content/uploads/2017/08/Booming-logo.jpg";
    image[1] = "/wp-content/uploads/2017/08/Langenegger-logo.jpg";
    image[2] = "/wp-content/uploads/2017/08/effect.png";
    image[3] = "/wp-content/uploads/2017/08/Van-Duyn-van-der-Geer-Logo.png";
    image[4] = "/wp-content/uploads/2017/08/VanEgmondtotaal-logo.jpg";
    image[5] = "/wp-content/uploads/2017/09/ricoh.png";
    image[6] = "/wp-content/uploads/2017/08/advocaten.png";
    image[7] = "/wp-content/uploads/2017/09/home.png";
    image[8] = "/wp-content/uploads/2017/09/ABS-Brouwer-LOGO-TBV-WEBSITE-GALA-02.jpeg";
    image[9] = "/wp-content/uploads/2017/09/Bjverhuur-logo.png";
    image[10] = "/wp-content/uploads/2017/09/Brouwer-logo.jpg";
    image[11] = "/wp-content/uploads/2017/09/Dental4U-300x109.jpg";
    image[12] = "/wp-content/uploads/2017/09/happazz_logo_facebook-01.png";
    image[13] = "/wp-content/uploads/2017/09/Horesca-logo.png";
    image[14] = "/wp-content/uploads/2017/09/huis-ter-duin-logo-hotel1-1024x768.jpg";
    image[15] = "/wp-content/uploads/2017/09/van-der-Wiel-logo.jpg";
    image[16] = "/wp-content/uploads/2017/09/VP-Group-BMW-MINI_staand.jpg";

    var link = new Array ();
    link[0] = "#";
    link[1] = "#";
    link[2] = "#";
    link[3] = "#";
    link[4] = "#";
    link[5] = "#";
    link[6] = "#";
    link[7] = "#";
    link[8] = "#";
    link[9] = "#";
    link[10] = "#";
    link[11] = "#";
    link[12] = "#";
    link[13] = "#";
    link[14] = "#";
    link[15] = "#";
    link[16] = "#";

    var size = image.length;
    var x = Math.floor(size*Math.random());
    var x2 = Math.floor(size*Math.random());

    $(a1).attr("href", link[x]);
    $(a2).attr("href", link[x2]);
    $(t1).attr("src", image[x]);
    $(t2).attr("src", image[x2]);

}, 2000);

})




Aucun commentaire:

Enregistrer un commentaire