Question

我正在编写一个jQuery插件，它引入了一个新方法foo()，它在调用它的DOM对象中创建了一些<img>元素。我将指向这些图像的指针存储在数组images中。在方法结束时，我调用setInterval("someFunction(images)", 1000)，它应定期对图像执行某些操作（例如更改src）。

以下是我的代码的简短版本：

(function($) { 
$.fn.foo = function () {
return this.each (function () {
    $box = $("#"+this.id);

    images = new Array();
    for (i = 0; i<4; i++) {
        images[i] = $("<img>");
        $box.prepend(images[i]);
    }

    setInterval("someFunction(images)", 1000);
});
}
function someFunction(images) {
    for (i = 0; i<images.length; i++) {
        images[i].attr("src", "foo"+(parseInt(Math.random()*5)));
    }
}
})(jQuery);

如果我将foo()应用于单个元素，则一切正常，但如果将其应用于多个元素，则所有定期更新都将应用于最后一个元素。我假设这是因为数组作为对someFunction的引用传递，然后被覆盖。

我尝试在数组上使用slice()来创建副本，但这不起作用，但我不明白为什么。我认为我正在寻找的是以某种方式将指针存储在父容器中的图像中。

我需要更改任何帮助，以便更新所有图像，而不仅仅是最后一个容器中的图像。

Answer 1

那么：

(function ($) {
    $.fn.foo = function () {
        return this.each(function () {
            $box = $(this); // Changed to "this"

            var images = new Array();
            for (i = 0; i < 4; i++) {
                images[i] = $("<img>");
                $box.prepend(images[i]);
            }

            // Added the function inline.
            setInterval(function () {
                for (i = 0; i < images.length; i++) {
                    images[i].attr("src", "foo" + (parseInt(Math.random() * 5)));
                }
            }, 1000);
        });
    };
})(jQuery);

编辑：

如果您想重复使用someFunction：

，也可以尝试这样做

(function ($) {
    $.fn.foo = function () {
       ...
            setInterval(function () {
                someFunction(images);
            }, 1000);
       ...
    };
})(jQuery);

function someFunction(images) {
    for (i = 0; i<images.length; i++) {
        images[i].attr("src", "foo"+(parseInt(Math.random()*5)));
    }
}

jQuery插件：使用setInterval定期更新jQuery元素数组

1 个答案: