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
– Taplar, Commented Jan 4, 2016 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.
– K.M., Commented Jan 4, 2016 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
– mmdwc, Commented Jan 4, 2016 at 16:55
@rubchick thanks for your reply, can you please help with this ? — mmdwc
– mmdwc, Commented Jan 4, 2016 at 16:57

Bek · Accepted Answer · 2016-01-04 17:57:22Z

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 4, 2016 at 17:57

answered Jan 4, 2016 at 17:37

Bek

3,2051 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mmdwc Over a year ago

thanks for your help, but it's not working... classes are not changing anymore at all...

Bek Over a year ago

let me create runnable version

Bek Over a year ago

@mmdwc have look what do you think

mmdwc Over a year ago

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 !

Taplar · Accepted Answer · 2016-01-04 17:12:53Z

0

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

edited Jan 4, 2016 at 17:12

answered Jan 4, 2016 at 17:00

Taplar

25k4 gold badges24 silver badges36 bronze badges

2 Comments

mmdwc Over a year ago

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 ?

Taplar Over a year ago

Really? Weird. So if you console.log() the nextClass number after the while you sometimes see the same number twice?

Collectives™ on Stack Overflow

jquery adding random class without repeat

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related