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

Question

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

这里是我的代码看起来像一个很短的版本：如果我申请foo()到一个单一的元素

(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); 

一切正常，但如果我把它应用到多个元素，应用了所有的定期更新到最后一个元素。我认为这是因为该数组作为参考被传递给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))); 
    } 
}