切换随机 class 与 jquery

Question

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

这里是 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");

});

这确实添加了一个 class，但它会继续添加它们而不删除它。你能帮忙吗？非常感谢！

Answer 1

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

创建参数

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

看来我没有完全理解这个问题。如果 class 应随机添加并在下一次点击时应删除：

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;
        }

    });

切换随机 class 与 jquery

toggle a random class with jquery

html

javascript

css

jquery

toggleclass