Question

我首先尝试将一个类添加到div中，然后使用Jquery中随机选择的类替换它。

在初始加载时，我的html看起来像这样：

<div class="portfolio-image boomer"></div>

5秒后，我想要一个4类的名单之一来代替婴儿潮，即

<div class="portfolio-image red"></div>

然后在另外5秒内，将上一步中添加的类替换为新类，即

<div class="portfolio-image green"></div>

我的随机课程是红色，绿色，蓝色，金色。

我的jQuery可以在最后添加随机类，但它会不断添加每一步而不是替换，所以我得到了：

<div class="portfolio-image boomer green"></div>

然后

<div class="portfolio-image boomer green red"></div>

等。所以，我的问题是如何删除最初的班级＆＃34; boomer＆＃34;使用第一个随机类，然后在每一步中继续替换该随机类？在不知道特定元素的最后一个随机添加的类是什么的情况下，如何使用switchClass或removeClass？还是我完全倒退了？

我的javascript：

＆＃13;

jQuery(document).ready(function(){
    animateTheBoxes();
});
function animateTheBoxes() {
  var classes = [ 'red', 'green', 'blue', 'gold'];
        jQuery(".portfolio-image").each(function(){
        jQuery(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
    setTimeout(animateTheBoxes, 5000);
}

＆＃13;

非常感谢您的任何考虑。

Answer 1

最简单的方法（因为它不要求你保持当前颜色是什么状态）;

jQuery(document).ready(function(){
    animateTheBoxes();
});

function animateTheBoxes() {
    var classes = [ 'red', 'green', 'blue', 'gold'];

    jQuery(".portfolio-image").each(function(){
        jQuery(this).removeClass('boomer ' + classes.join(' ')).addClass(classes[~~(Math.random()*classes.length)]);
    });

    setTimeout(animateTheBoxes, 5000);
}

有关详细信息，请参阅the docs for removeClass()。

Answer 2

可能不是最高性能的解决方案，但您可以删除所有类，然后添加＆＃34;投资组合图像＆＃34;然后是随机选择的一个。没有参数的jQuery.removeClass（）将删除所有类。所以这样的事情可能有用。

jQuery(this).removeClass().addClass('portfolio-image ' + classes[~~(Math.random()*classes.length)]);

如何在Jquery中随机切换类？

2 个答案: