Question

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

这是一个小提琴：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

您可以使用removeClass和addClass方法代替toggleClass。 Array.prototype.join可用于为removeClass创建参数。

$(".element").removeClass(classes.join(' ')) //  'one two three'
             .addClass(classes[randomnumber]);

我似乎完全不理解这个问题。如果应该随机添加该类，则应删除下一次单击：

var $e = $(".element");
var classes = ['one', 'two', 'three'];

$(".button").click(function () {
    var random, hasClass;

    hasClass = classes.filter(function(cls) {
        return $e.hasClass(cls);
    }).length;

    if ( hasClass ) {
       $(this).text('add random class');
       $e.removeClass(classes.join(' '));
    } else {
       $(this).text('cancel added class');
       random = Math.floor(Math.random() * classes.length);
       $e.addClass(classes[random]);
    }
});

https://jsfiddle.net/ceLav6d6/

Answer 2

这是怎么回事？

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如果用空格分隔，可以在一次调用中使用多个类，因此如果从数组中删除所有类，然后添加一个随机类，它就可以工作。

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

Answer 3

根据使用toggleClass方法，这是一种切换类的有效方法。

JSFIDDLE

//使用Javascript

    var isAddingClass = true;
    var currentClass = '';
    $(".button").click(function () {

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

        if (currentClass == '') {
            currentClass = classes[randomnumber];
        }
        $(".element").toggleClass(currentClass, isAddingClass);

        if ($(this).text() == "cancel added class") {
            $(this).text("add random class");
            isAddingClass = true;
            currentClass = classes[randomnumber];
        }
        else {
            $(this).text("cancel added class");
            isAddingClass = false;
        }

    });

用jquery切换随机类

3 个答案: