Как передать цепочку селектора jQuery моему плагину?

Question

Я новичок в jQuery, и мне нужно решить проблему выбора. У меня есть много триггеров с class="trigger", для которых вызывается функция плагина jQuery myFunc.

Триггерами могут быть изображения или ссылки, и каждый триггер должен ссылаться на поле ввода (текстовое поле или текстовое поле) с помощью 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);

Answer 1

используйте пользовательский атрибут вместо того, чтобы полагаться на .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 2

Я бы посоветовал вам сделать targetSelector функцией, где this относится к текущему .trigger и возвращает соответствующую цель:

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

Который может быть реализован с помощью .call() ^{[документы]} :

$.fn.myFunc = function(options) {

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

};

Это дает вам максимальную гибкость, и вы можете выполнять любой обход DOM, который вы хотите в этой функции.

Конечно, вы можете сделать его более сложным и заставить targetSelector принимать и строку выбора, и функцию, а затем обрабатывать значение соответствующим образом.

* * Пример тысяча двадцать-один: * * 1 022

$.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 3

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