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

Question

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

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

这是一个示例，但请注意，targets 可能先于或后，最终触发中的某些元素>之间：

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