jQuery Plugin this.each ve her nesneye function özelliği ekleyin?

Question

Birden fazla eşleşme için this.each öğesini döndüren bir jQuery eklentisi oluşturmak mümkün mü, her döngüde her nesneye bir işlev özelliği eklemem mümkün mü? Bu işlevi daha sonra doğrudan nesnenin dışında aramak istiyorum.

(function ($) { 
    $.fn.roflcopter = function(options) { 

    return this.each(function() { 
     $(this).addClass('lol'); 
     $(this).getMyValue = function(e){ 
      return returnMyFilteredValue($(this)); 
     } 
    }); 

    function returnMyFilteredValue(elem){ 
     return $(elem).val().replace("cat", "dog"); 
    } 

    }; 
}(jQuery)); 

Sonra bir document.ready işlev çağrısında bunda istediğiniz

:

$("input.coolStuff").roflcopter(); 
var value = $("input.coolStuff").first().getMyValue(); 

bu mümkün mü

Örneğin

, burada yapmaya çalıştığım şey bu basitleştirilmiş bir versiyonu ? GetMyValue'nin bir işlev olmadığını belirten bir hata alıyorum.

Answer 1

küçük değişiklikler de .each() içinde $(this) için this ayarlamak için: Sadece 'bu' değil $ üzerinde (bu) üzerine getMyValue yerleştirin ve

$("input.coolStuff").first()[0].getMyValue() 

Answer 2

Bir öğede bir işlevi saklamak ve çağırmak için .data()'u kullanabilirsiniz; Function.prototype.bind()getMyValue

$(function() { 
 
    (function($) { 
 
    $.fn.roflcopter = function(options) { 
 
     return this.each(function() { 
 
     $(this).addClass("lol"); 
 
     function getMyValue(e) { 
 
      return returnMyFilteredValue(this); 
 
     }; 
 
     $(this).data().getMyValue = getMyValue.bind($(this)); 
 
     }); 
 

 
     function returnMyFilteredValue(elem) { 
 
     return elem.val(function(index, val) { 
 
      return val.replace("cat", "dog"); 
 
     }) 
 
     } 
 

 
    }; 
 
    }(jQuery)); 
 

 
    $("input.coolStuff").roflcopter(); 
 
    var value = $("input.coolStuff").first().data().getMyValue(); 
 
    console.log(value, value.val()) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input class="coolStuff" value="cat" /> 
 
<input class="coolStuff" value="cat" />