3

我正在编写一个 jQuery 插件，它引入了一个新方法，它在调用它的 DOM 对象foo()中创建一些元素。<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()在数组上使用来创建一个副本，但这没有用，虽然我不明白为什么。我认为我正在寻找的是以某种方式将指向我的图像的指针存储在它们的父容器中。

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

4

1 回答 1

2

那么这个怎么样：

(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)));
    }
}
于 2012-04-12T12:22:04.370 回答