如何將jQuery選擇器鏈傳遞給我的插件？

我對jQuery相當陌生，我需要解決一個選擇問題。我有很多觸發器，其中class="trigger"，jQuery插件功能myFunc被調用。如何將jQuery選擇器鏈傳遞給我的插件？

觸發器可以是圖像或鏈接，並且每個觸發器必須將指向class="target"的輸入字段（文本框或文本區）。

下面是一個例子，但請注意，targets可能先或遵循在之間的一些元素triggers最終：

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

來源

2012-01-07 gremo

我會建議你做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); 
    }; 

};

來源

2012-01-07 10:24:46

這隻會找到觸發後的人，他提到自己的目標可能是觸發因素，這將需要也檢查之前，.prev – 2012-01-07 10:27:28

@Patrick：這只是相應地設置傳遞給'targetSelector'的函數。我認爲這個問題更多的是關於一般方法而不是具體情況。 – 2012-01-07 10:31:05

我喜歡你的答案，並贊成它。但是，如何處理（極少數情況下）target1在trigger1之前而target2在trigger2之後？ – gremo 2012-01-07 11:06:42

使用自定義屬性依賴。接下來或.prev，而不是因爲你必須檢查prev和next，看看哪一個現在retrives的權利。

例

<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>

來源

2012-01-07 10:25:56

如果您使用自定義HTML屬性，則應該使用HTML5'data- *'屬性：http://ejohn.org/blog/html-5-data-attributes/ – 2012-01-07 10:34:53

我無法使用HTML5功能... – gremo 2012-01-07 11:02:27

您不必使用data- * html5功能，使用它們只是爲了幫助您使標記「有效」，這確實有優勢，但不是必需的。 – 2012-01-07 11:09:48

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

來源

2012-01-07 10:28:10

如何將jQuery選擇器鏈傳遞給我的插件？

回答

相關問題