Question

我正在尝试使用jQuery在页面上的一组div中创建一个数组。我基本上想要随机显示它们的显示方式，所以暂时，我只是试图循环它们。一切似乎都有效，除了我只看到最后一个数组项，即使它执行的操作次数与数组中的元素相同，并添加了正确的行为。

JS是：

<script>
$(document).ready(function(){
    var obj = $('.item');
    var arr = $.makeArray(obj);
    $('.array').html('');

    $.each(arr, function(k,v){
        $('.array').html(v).fadeIn(250).delay(2000).fadeOut(250);
    });
});
</script>

标记是：

<div class="array">
    <div class="item">First</div>
    <div class="item">Second</div>
    <div class="item">Third</div>
    <div class="item">Fourth</div>
</div>

我不确定它是否相关，但这里是CSS，以防万一：

div.item {
    display: inline; float: left; width: 960px; height: 260px; font-family: helvetica; font-size: 10px; text-align: center; background: #eee; border:  solid 1px #888;
}

我得到的只是带有“第四”文字的div淡入淡出4次。这告诉我它正在迭代数组（因为它正在使用计数），但为什么我只看到最后一个元素？有人有什么想法吗？

谢谢，

Ť

Answer 1

循环在循环的每次迭代中都会覆盖数组div的内容。因此，您只能看到最后一次迭代的结果。

使用.html(...)时，它与.empty().append(...)相同。所以你循环所做的就是连续4次清空内容，只有最后一次空后的追加才真正生效。

如果您希望这些元素一个接一个地淡化/淡出，您可以这样做：

$(document).ready(function(){
    var obj = $('.item');
    $('.array').html('');

    obj.each(function(i){
        $('.array').append($(this).hide().delay(i * 2500).fadeIn(250).delay(2000).fadeOut(250));
    });
});

你可以看到它在这里运行：http://jsfiddle.net/9Xg8X/

Answer 2

另外值得一提的是，对效果方法的调用不会阻塞。这就是为什么循环在第一次效果发生之前已经完成的原因。

你没有说出你真正想要的东西，但如果你想要追加每个元素并且一个接一个地出现/消失，你可以这样做：

$(document).ready(function(){
    var obj = $('.item').detach();

    var count = obj.length;
    var target = $('.array');
    var display = function(i) {
        var element = $(obj[i]);
        var cb = (i < count-1) ? function(){display(i+1)} : function(){};
        element.appendTo(target).hide().fadeIn(250).delay(2000).fadeOut(250, cb);
    };
    display(0);
});

实际上不需要使用$.makeArray()。

DEMO

Javascript数组与$ .makeArray无法正常工作

2 个答案: