如何将 jQuery 选择器链传递给我的插件？

Question

我对 jQuery 很陌生，我需要解决一个选择问题。我有很多带有class="trigger" 的触发器，在这些触发器上调用了jQuery 插件函数myFunc。

触发器可以是图像或链接，每个触发器必须引用带有class="target"的输入字段（文本框或文本区域）。

这是一个示例，但请注意targets 可能先于 或跟随 triggers 最终会在between 中包含一些元素：

<a class="trigger">trigger 1</a>
<input class="target" type="text" /><!-- target for trigger 1 -->

<a class="trigger">trigger 2</a>
<textarea class="target"></textarea><!-- target for trigger 2 -->

问题是我需要将 targetSelector（如 .next('.target') 或其他取决于 DOM 的东西）传递给我的插件，以便为每个触发器获取每个目标元素：

$('.trigger').myFunc({ // Plugin invokation
   targetSelector : <code here> // Pass something like .next('.target')
});

(function($) { // Plugin defininition
    $.fn.myFunc = function(options) {

       this.each(function() { // Iterate each trigger
          var target = <code here>; // Get target for current trigger
       };

    };
})(jQuery);

Answer 1

我建议你将targetSelector 设为一个函数，其中this 指的是当前的.trigger，它会返回相应的目标：

$('.trigger').myFunc({ // Plugin invokation
   targetSelector : function() {
       return $(this).next('.target')
   }
});

可以用.call() ^[docs]实现：

$.fn.myFunc = function(options) {

   this.each(function() { // Iterate each trigger
      var target = options.targetSelector.call(this);
   };

};

这为您提供了最大的灵活性，您可以在此函数中执行您想要的任何 DOM 遍历。

当然你可以让它更复杂，让targetSelector同时接受一个选择器字符串和一个函数，然后相应地处理这个值。

例子：

$.fn.myFunc = function(options) {
   var selectorFunc = $.isFunction(options.targetSelector) ? 
                         options.targetSelector :
                         function() {
                            return $(options.targetSelector);
                         };

   this.each(function() { // Iterate each trigger
      var target = selectorFunc.call(this);
   };

};

Answer 2

使用自定义属性而不是依赖 .next 或 .prev，因为您必须检查 prev 和 next 以查看哪个现在可以检索。

例子

<a class="trigger" mytarget="Target1">trigger 1</a>
<input class="target" type="text" id="Target1" /><!-- target for trigger 1 -->

<a class="trigger" mytarget="Target2">trigger 2</a>
<textarea class="target" id="Target2"></textarea><!-- target for trigger 2 -->

<script>
$('.trigger').myFunc();

(function($) { // Plugin defininition
    $.fn.myFunc = function(options) {

       this.each(function() { // Iterate each trigger
          var targetName = $(this).attr("mytarget");

          var target = $("#"+targetName); // Get target for current trigger
       };

    };
})(jQuery);


</script>

Answer 3

$('.trigger').each(function() //split your selects
{
    $(this).myFunc({  
        //your code here
    });    
});