Question

是否有可能创建一个jQuery插件，返回this.each以进行多次匹配，从而允许我为每个循环中的每个对象添加一个函数属性？我想稍后直接从该对象调用此函数。

例如，这是我尝试做的简化版本：

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

然后我想在document.ready函数中调用它：

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

这可能吗？我收到一条错误，指出getMyValue不是一个函数。

Answer 1

您可以利用.data()来存储和调用元素的函数; Function.prototype.bind()在this $(this)内将.each()设置为getMyValue

＆＃13;

$(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())
})

＆＃13;

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

＆＃13;

Answer 2

小改动：只需将getMyValue放在＆＃39;这个＆＃39;而不是$（this）并通过

访问它

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

jQuery插件返回this.each并为每个对象添加函数属性？

2 个答案: