1

我正在尝试编写一个插件，它将选择多个元素，然后对它们应用一些私有方法（参见下面的代码）。然后我还想让用户能够使用 .activate() 函数手动触发插件方法的激活。

这是我的代码：

基本上，当我选择多个项目然后尝试像这样使用手动激活时：

$(".pox-wrapper").imagepox({ // NOTE: selects two elements
    manualActivation: true
});

var manual = $(".pox-wrapper").data('imagepox');

setTimeout(function(){
    manual.activate();
}, 5000);

它只会将 activate() 方法应用于查询中的第一个元素......

这是我的第一个 jQuery 插件，到目前为止我已经能够处理所有事情，但我不确定这个插件是否是有效调用公共方法的正确方法。我还尝试在插件中使用带有事件侦听器的自定义事件，但它仍然只将方法应用于页面中的第一个元素。

提前致谢 ：）

4

1 回答 1

0

这不是你插件的错。data不像那样工作，它不知道如何从元素集合中返回数据。因为想一想，集合中的每个元素都包含自己的数据对象！

因此，当您在集合上调用数据时，它会从第一个集合返回数据。快速的解决方案是将 innards 更改为setTimeout集合中所有元素的循环，并在它们上调用 activate。

setTimeout(function(){
    $(".pox-wrapper").each(function(){ 
       $(this).data('imagepox').activate();
    })
}, 5000);

在我看来，您想将函数添加到 jquery 对象的集合中。这是一个 jquery 插件的用例。你可以像这样创建一个轻量级的：

$.fn.imagepox.activate = function(){ //do this after you create your plugin!
  return this.each(function(){
    var $this = $(this);
    var data = $this.data('imagepox');
    if(data){
      data.activate();
    }
  });
};

现在你可以这样称呼它：

$(".pox-wrapper").imagepox.activate()
于 2013-09-12T15:29:15.380 回答