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 に答える