jquery adding random class without repeat

Question

I'm using a function on my website to randomly addClass to a div. works fine, but I can't find a way to not repeat the same class twice one after the other (cause sometimes the same class is added and we can think the code is not working)...

here is my jquery code :

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

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

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

});

can anybody help me with this ?

thanks

Your seeing addClass() add the same class twice? Or are you saying you don't want to executions of click back to back to try the same class? — Taplar, Jan 04 '16 at 16:54
Save the generated number to a variable and then check it for the second time in a while loop until u get another number — K.M., Jan 04 '16 at 16:54
@Taplar, I don't want the same class to be added twice one after the other, cause sometimes the same class is added and we can think the code is not working — mmdwc, Jan 04 '16 at 16:55
@rubchick thanks for your reply, can you please help with this ? — mmdwc, Jan 04 '16 at 16:57
`addClass()` already handle duplicate class so what you are saying doesn't really make sense — A. Wolff, Jan 04 '16 at 17:06
if you dont want to duplicate the class try to remove the class from the array so next time the math.random() cannot chose this class or you are trying to do somthing else ? — elreeda, Jan 04 '16 at 17:28

Bek · Accepted Answer · 2016-01-04T17:57:22.153

1

if you want classes not repeat you can use following:

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>

edited Jan 04 '16 at 17:57

answered Jan 04 '16 at 17:37

Bek

3,157
1
17
28

thanks for your help, but it's not working... classes are not changing anymore at all... – mmdwc Jan 04 '16 at 17:52
let me create runnable version – Bek Jan 04 '16 at 17:53
@mmdwc have look what do you think – Bek Jan 04 '16 at 18:02
it works perfectly fine... I was using this inside a function and calling the function at document.ready and with other onclick function. I had to put the var outside the function to make it work. thanks a lot ! – mmdwc Jan 04 '16 at 18:17

Taplar · Answer 2 · 2016-01-04T17:12:53.627

//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;
    });
})();

thanks for your reply, but unfortunatly it's not working... I keep having the same class twice in a row from time to time... do you know why ? — mmdwc, Jan 04 '16 at 17:29
Really? Weird. So if you console.log() the nextClass number after the while you sometimes see the same number twice? — Taplar, Jan 04 '16 at 17:34

jquery adding random class without repeat

2 Answers2