javascript - jquery添加随机类而不重复

Question

我在我的网站上使用一个函数将类随机添加到一个 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>