javascript - 使用 jquery 切换一个随机类

Question

这个想法是有一个按钮，当点击它时，添加一个从数组中挑选它的随机类到另一个 div。我想要的是在我重新单击它时使用相同的按钮从中删除任何随机添加的类。

这是一个 fiddle :https://jsfiddle.net/jLmj7bwk/1/

这是函数

$(".button").click(function() {

    var classes = ['one', 'two', 'three'];
    var randomnumber = Math.floor(Math.random() * classes.length); 

    $(".element").toggleClass(classes[randomnumber]);   

    if  ($(this).text() == "cancel added class")
        $(this).text("add random class")


    else
        $(this).text("cancel added class");

});

这确实添加了一个类，但它一直在添加它们而不删除它。你能帮忙吗？非常感谢!

Answer 1

这是怎么回事？

https://jsfiddle.net/jLmj7bwk/3/

$(".button").click(function() {

var classes = ['one', 'two', 'three'];
var randomnumber = Math.floor(Math.random() * classes.length); 

if($(this).text() === "cancel added class")
{
    $(".element").removeClass(classes.join(' '));
    $(this).text("add random class");
}
else
{
$(".element").addClass(classes[randomnumber]);
$(this).text("cancel added class");
}

}); 

.removeClass 可以在一次调用中获取多个类，如果它们之间用空格分隔的话，所以如果您从数组中删除所有类，然后随机添加一个类，它就可以工作。

请注意，有时看起来颜色没有改变。确实如此，但由于阵列较小，颜色相同的可能性很高。