Javascript jquery不重复地添加随机类
我正在使用我网站上的一个函数将类随机添加到一个div中。 工作正常,但我找不到一种方法不一个接一个地重复同一个类两次(因为有时添加了同一个类,我们可能认为代码不工作) 以下是我的jquery代码:Javascript jquery不重复地添加随机类,javascript,jquery,random,addclass,removeclass,Javascript,Jquery,Random,Addclass,Removeclass,我正在使用我网站上的一个函数将类随机添加到一个div中。 工作正常,但我找不到一种方法不一个接一个地重复同一个类两次(因为有时添加了同一个类,我们可能认为代码不工作) 以下是我的jquery代码: $("#switch").click(function(){ var classes = ["vert", "escalier","reverse","demi_escalier","demi_escalier_2","ligne" ]; $("#logo").removeClass().addC
$("#switch").click(function(){
var classes = ["vert", "escalier","reverse","demi_escalier","demi_escalier_2","ligne" ];
$("#logo").removeClass().addClass(classes[~~(Math.random()*classes.length)]);
});
有人能帮我吗
谢谢如果您不想重复上课,可以使用以下方法:
var类=[“垂直”、“垂直”、“反向”、“半水平”、“半水平”、“垂直2”、“直线”];
var classesCopy=classes.slice();
$(“#开关”)。单击(函数(){
如果(!classesCopy.length){
classesCopy=classes.slice();
}//所有类用完后,将从头开始
var classToAdd=classesCopy.splice(Math.floor(Math.random()*classesCopy.length),1);
$('.current class').text('current class:'+classToAdd);
$(“#logo”).removeClass().addClass(classToAdd+”);
});代码>
#徽标{
宽度:100px;
高度:100px;
背景:绿色;
}
转换
addClass()是否将同一个类添加两次?或者你是说你不想通过背靠背点击来尝试同一个类?将生成的数字保存到一个变量中,然后在while循环中第二次检查它,直到你得到另一个number@Taplar,我不希望同一个类一个接一个地添加两次,因为有时添加了相同的类,我们可以认为代码不是working@rubchick谢谢你的回复,你能帮忙吗?@mmdwc,请看下面的Taplar解决方案,这就是我所说的谢谢你的回复,但不幸的是它不起作用。。。我经常连续两次上同一门课。。。你知道为什么吗?真的吗?奇怪的因此,如果您在控制台.log()上显示下一个类编号,而您有时会看到相同的编号两次?谢谢您的帮助,但它不起作用。。。类不再改变…让我创建runnableversion@mmdwc看看你认为它工作得很好。。。我在一个函数中使用它,并在document.ready和其他onclick函数中调用该函数。我必须将var放在函数之外才能使它工作。谢谢!
//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;
});
})();