0

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

参考这里是代码：JSFIDDLE LINK

只是对流程的回顾：

  1. 文档已加载，并且有两段文本。
  2. 运行 jQuery，它用于将每个字母放入一个 span 中——具有唯一的类号。
  3. 跨度都有 CSS 不透明度过渡。
  4. jQuery 循环遍历#main 容器中的所有 span 并添加 .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');

任何人都可以帮助我计算数学 - 或帮助我想出另一个解决方案，我相信如果它有效，效果看起来会很棒。

谢谢！

4

3 回答 3

2

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

jsFiddle 演示

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 演示

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);
}
于 2013-09-13T16:24:35.250 回答
0

.hasClass 不是选择器，您需要选择要更改的跨度元素：

$('#main span.number'+random).addClass("change");

于 2013-09-13T16:14:48.007 回答
0

你可能过度设计它。看到这个小提琴

$(document).ready(function() {
    $('p').each(function(){        
        var spans = $(this).text().split(' ');        
        $p = $("<p></p>");        
        $.each(spans, function(index, value) {
          $p.append($("<span>"+value+" </span>"));
        });        
        $(this).replaceWith($p);        
    });

    $("#main span").each(function(index) {
        var r = Math.floor(Math.random() * 2000);
        $(this).delay(r).fadeTo('slow', 0);
    });    
});
于 2013-09-13T16:32:30.947 回答