Question

我对jQuery很新，我需要解决选择问题。我有很多class="trigger"触发器，调用了jQuery插件函数myFunc。

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

以下是一个示例，但请注意targets可能先于或关注 triggers最终之间的某些元素< /强>：

<a class="trigger">trigger 1</a> <input class="target" type="text" /> <a class="trigger">trigger 2</a> <textarea class="target"></textarea>

问题我需要将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，因为您必须检查上一个和下一个，看看现在正在检索哪一个。

实施例

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

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

3 个答案: