Question

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

这是我的代码：

基本上，当我选择多个项目然后尝试使用手动激活时，如下所示：

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

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

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

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

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

提前致谢:)

Answer 1

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

因此，当您在集合上调用数据时，它会返回第一个数据。快速解决方案是将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()

jQuery插件 - 公共方法 - 仅针对一个元素的数据

1 个答案: