Changer de classe toutes les quelques secondes à partir des valeurs dans un tableau

Question

Je cherche à changer la classe sur une div toutes les 3 secondes. Les classes sont dans un tableau, la classe précédente doit être supprimée et la suivante ajoutée. "First" devrait être le premier, puis "second", puis "third" et revenir en boucle.

Je sais comment addClass('quelquechose') mais je suis bloqué sur la partie où le code devrait mettre la prochaine classe disponible du tableau.

    jQuery(document).ready(function ($) {
    var images = ['first', 'second', 'third'];

    function changerFond() {
        var nomClasse = $('#principal').attr('class');
        if (nomClasse == null)
            nomClasse = images[0];

        $('#principal').removeClass(function () {
            var nouvelleClasse = // trouver la valeur dans le tableau et passer à la valeur suivante, si fin du tableau, revenir au début
                $(this).addClass(nouvelleClasse);
        });
    }

    changerFond();
    setInterval(changerFond, 2000);
});

https://jsfiddle.net/skd636fc/3/

Answer 1

Vous pouvez utiliser un compteur pour garder la trace de l'index de la classe.

Démo

jQuery(document).ready(function ($) {
    var images = ['first', 'second', 'third'],
        i = 0; // Compteur pour suivre l'index de la classe

    // Mettre en cache la référence de l'élément
    var $main = $('#main');

    function changerArrièrePlan() {
        $main.attr('class', images[i++]); // Définir la valeur de l'attribut de classe
        i = i % images.length; // Si supérieur à la longueur de la classe, réinitialiser à 0
    }

    // Ajouter la première classe au chargement de la page
    changerArrièrePlan();
    setInterval(changerArrièrePlan, 2000);
});

jQuery(document).ready(function ($) {
    var images = ['first', 'second', 'third'],
        i = 0;

    var $main = $('#main');
    function changerArrièrePlan() {
        $main.attr('class', images[i++]);
        i = i % images.length;
    }

    changerArrièrePlan();
    setInterval(changerArrièrePlan, 2000);
});

#main {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.first {
    background-color: #f01 !important;
}

.second {
    background-color: blue;
}

.third {
    background-color: green;
}

---

Si possible, ajouter la première classe à l'élément depuis HTML

Démo

HTML:

JavaScript:

jQuery(document).ready(function ($) {
    var images = ['first', 'second', 'third'],
        i = 0;

    var $main = $('#main');
    setInterval(function () {
        $main.attr('class', images[++i % images.length]);
    }, 2000);
});

jQuery(document).ready(function ($) {
    var images = ['first', 'second', 'third'],
        i = 0;
    var $main = $('#main');
    setInterval(function () {
        $main.attr('class', images[++i % images.length]);
    }, 2000);
});

#main {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.first {
    background-color: #f01 !important;
}

.second {
    background-color: blue;
}

.third {
    background-color: green;
}

Answer 2

Vous n'avez pas besoin de passer une fonction dans removeClass. Vous devez tout simplement garder une trace de la classe sur laquelle vous êtes pour passer à la suivante au prochain tick du timer. J'ai expliqué cela dans les commentaires :

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

    var images = ['first', 'second', 'third'];
    // Se souvenir de l'indice dans le tableau, commencer juste avant la première entrée
    var classIndex = -1;

    function changeBackground() {

        // Récupérer l'élément
        var main = $("#main");

        // Si ce n'est pas la première fois, retirer la classe précédente
        if (classIndex >= 0) {
            main.removeClass(images[classIndex]);
        }

        // Mettre à jour l'indice, boucler quand on atteint la fin du tableau
        classIndex = (classIndex + 1) % images.length;

        // Ajouter la nouvelle classe
        main.addClass(images[classIndex]);
    }

    changeBackground();
    setInterval(changeBackground, 2000);

});

Notes à propos du code ci-dessus :

• Il est évidemment beaucoup plus compact sans les commentaires explicatifs
• Cela ne supprimera pas d'autres classes non liées sur #main (alors que les solutions utilisant removeClass() sans arguments le feront)

Voici une version plus compacte si vous êtes intéressé par ce genre de choses. Je ne recommanderais pas de le compacter à ce niveau, cependant. :-)

jQuery(document).ready(function($){   
    var classIndex = 0, images = ['first', 'second', 'third'];
    $("#main").addClass(images[classIndex]);
    setInterval(function () {
        $("#main")
            .removeClass(images[classIndex])
            .addClass(images[classIndex = (classIndex + 1) % images.length]);
    }, 2000);
});

Answer 3

Essayez d'utiliser une variable counter. Incrémentez-la à l'intérieur de setInterval et utilisez des opérations modulo pour créer une référence circulaire à l'index du tableau,

var images = ['premier', 'deuxième', 'troisième'];
var $elem = $('#main'), cnt = 0;

function changeBackground(){
 $elem.removeClass().addClass(images[cnt++ % images.length]);
}

setInterval((changeBackground(), changeBackground), 2000);

DEMO

Answer 4

Vous pouvez faire,

var images = ['premier', 'deuxième', 'troisième'];

function changeBackground() {
  var className = $('#principal').attr('class');
  var newIndex = (images.indexOf(className) + 1) % images.length;
  $("#principal").removeClass().addClass(images[newIndex]);
}
setInterval(changeBackground, 2000);

Fiddle

Answer 5

 jQuery(document).ready(function($) {
     var images = ['first', 'second', 'third'],
        i = 0;

     function changeBackground() {
         $('#main').attr('class', images[i++]);
         i = i % images.length;
     }

     changeBackground();
     setInterval(changeBackground, 2000);
 });

#main {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.first {
    background-color: #f01 !important;
}

.second {
    background-color: blue;
}

.third {
    background-color: green;
}