jquery добавление случайного класса без повторения

Question

Я использую функцию на своем веб-сайте, чтобы случайно добавитьClass в div. работает отлично, но я не могу найти способ не повторять один и тот же класс дважды один за другим (потому что иногда один и тот же класс добавляется, и мы можем думать, что код не работает).

здесь мой код jquery:

$("#switch").click(function(){ 

var classes = ["vert", "escalier","reverse","demi_escalier","demi_escalier_2","ligne" ]; 

$("#logo").removeClass().addClass(classes[~~(Math.random()*classes.length)]); 

}); 

Может ли кто-нибудь помочь мне с этим?

благодаря

Answer 1

если вы хотите классов не повторять вы можете использовать следующие:

var classes = ["vert", "escalier", "reverse", "demi_escalier", "demi_escalier_2", "ligne"]; 
 
var classesCopy = classes.slice(); 
 

 
$('#switch').click(function() { 
 
    if (!classesCopy.length) { 
 
    classesCopy = classes.slice(); 
 
    } // once alls classes used up it starts from beginning 
 
    var classToAdd = classesCopy.splice(Math.floor(Math.random() * classesCopy.length), 1); 
 
    $('.current-class').text('current class: ' + classToAdd); 
 
    $('#logo').removeClass().addClass(classToAdd+''); 
 
});

#logo { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
}

<div class='current-class'></div> 
 
<div id='logo'></div> 
 
<button id='switch'>switch</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 2

//put it in an IIFE so the variables are scoped down 
(function(){ 
    //constants, don't need to declare them in the click function over and over 
    var classes = ["vert", "escalier","reverse","demi_escalier" 
        ,"demi_escalier_2","ligne" ]; 
    //keep track of the last class used, -1 initial so no chance of mismatch 
    var lastNumber = -1; 
    var $logo = $("#logo"); 

    $("#switch").on('click', function() { 
     //get a new index 
     var nextClass = Date.now() * 100 % classes.length;; 

     //while they match, keep getting a new one 
     while (nextClass === lastNumber) { 
      nextClass = Date.now() * 100 % classes.length; 
     } 

     $logo.removeClass().addClass(classes[nextClass]); 
     //save it off so we can do the double check again on the next execution 
     lastNumber = nextClass; 
    }); 
})();