javascript - 随机消失的文本效果 - 使用 jQuery 选择随机 Div

Question

我正在处理的事情有奇怪的问题。

这里的引用代码是:JSFIDDLE LINK

只是流程的回顾:

1. 文档加载完毕，有两段文字。
2. 运行 jQuery，用于将每个字母放入一个范围内——具有唯一的类号。
3. Span 上都有 CSS 不透明度过渡。
4. jQuery 遍历#main 容器中的所有跨度并添加 .change 类来触发不透明度。一旦所有跨度都添加了类，此循环就会结束。

现在我缺少的是一种遍历跨度中所有 div 的方法——并随机开始将每个跨度的不透明度更改为 0。这需要以完全随机的顺序完成——但需要在循环遍历所有跨度后停止。

下面我有一些数学代码——但我不确定为什么它不起作用。

var min = 1;
var max = 400;
var paras = $('#main span');
var random = Math.floor(Math.random() * (max - min + 1)) + min;
paras.hasClass('number' + random).addClass('change');

任何人都可以帮我计算一下——或者帮我想出另一个解决方案，我相信如果可行的话效果会很好。

谢谢!

Answer 1

您始终可以只选择没有 change 类的剩余 span 元素。

jsFiddle Demo

function randomChange() {
    var paras = $('#main span:not(.change)');
    var min = 0;
    var max = paras.length - 1;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;
    $(paras.get(random)).addClass('change');

    if (paras.length > 1) setTimeout(randomChange, 5);
}

---

如果我们只搜索一次未更改的跨度并从数组中删除更改的元素，我们可以提高效率。

jsFiddle Demo

var paras = $('#main span:not(.change)');

function randomChange() {
    var min = 0;
    var max = paras.length - 1;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;
    $(paras.get(random)).addClass('change');

    // Remove from item from the array
    paras.splice(random, 1);

    console.log("Chose: "+ random + " Out: " + max);
    if (paras.length > 0) setTimeout(randomChange, 5);
}