Question

我正在尝试创建一个jquery'for loop'，用于从数组中获取图像URL并使用它们来更改div的背景，类为“.mobile”。

数组中填充了3个网址。问题是第一个和第二个URL被忽略，第三个图像显示3次。此外，我尝试插入警报以查看“i”变量包含的内容，并且警报在彼此之后出现3次，从0到2迭代，而不会在每次警报之前执行代码。

以下是代码：

$(document).ready(function(){
    var images = [ "url(images/image1.png)","url(images/image2.png)","url(images/image3.png)" ];        
    var i;
    for (i = 0; i < images.length; i = i+1) {
        $('.mobile').delay(2000).animate({'opacity': '0.0'}, 1000);
        $('.mobile').css("background-image", images[ i ]);
        $('.mobile').delay(2000).animate({'opacity': '1.0'}, 1000);
        alert(i);
    };

});

所以回顾一下，我想在下一个图像出现之前延迟显示数组中的每个背景图像。

我仍然是jQuery的新手，所以任何帮助都将不胜感激！：）

Answer 1

尝试

$(document).ready(function () {
    var images = ["url(http://placehold.it/32/ffff00)", "url(http://placehold.it/32/ff0000)", "url(http://placehold.it/32/000000)"];

    function render(images) {
        var img = images.shift();
        images.push(img);

        $('.mobile').delay(2000).animate({
            'opacity': '0.0'
        }, 1000, function () {
            console.log(img)
            $(this).css("background-image", img).delay(2000).animate({
                'opacity': '1.0'
            }, 1000, function () {
                render(images);
            });
        });
    }

    render(images)

});

演示：Fiddle

Answer 2

问题在于您的JQuery选择器，$('.mobile')将选择与类选择器匹配的所有元素，因此所有元素的背景图像都会随每个循环而变化。

您可以使用eq(i)根据索引选择正确的元素，如下所示：

for (i = 0; i < images.length; i = i+1) {
    var $item = $('.mobile').eq(i);
    $item.delay(2000).animate({'opacity': '0.0'}, 1000);
    $item.css("background-image", images[ i ]);
    $item.delay(2000).animate({'opacity': '1.0'}, 1000);
};

Answer 3

有一些事情。如果不透明度为“0.0”，则不显示图像。如果您想在动画完成后完成某些操作，请传递一个回调函数。

JQuery For Loop“忽略”它的内容

3 个答案: