javascript - 如何使用 jQuery 扩展方法为元素或类选择器创建自定义插件

Question

试图提高我的 jQuery/javascript 技能，我认为我有一个完美的问题，可以帮助我学习如何以及何时使用 jQuery 对象的扩展方法。我基本上尝试创建一个限制 input[type=text] 元素的最大长度的函数。

我真正想要的是为用户提供一个关于如何使用 jQuery 扩展 $fn 的示例。创建自定义插件。虽然不是理想的用法，但这个示例很简单，因为用户只需使用基于类名的选择器传递某种值(最小值或最大值或两者？)，然后插件自动更新元素 max-length/min-长度和长度值)。

这是我到目前为止所拥有的，但我知道我还没有走上正确的道路。或者更好的是，还创建另一个插件来设置 min-length、max-length、length 属性。请随意根据需要进行编辑。提前致谢!

<script>
maxLength(length,element) {

        if (element.val().length <= length) { 
            return false;
        } else {
            return true;
        }

}

$(".max-length").keypress(function (element) {
    maxLength(2,element);
});
</script> 

我想要的是我可以

A: $("Textbox).maxLength(2);//更喜欢这个，因为这就是我想使用它的方式？

或者

B: maxLength($("#Textbox"), 2);

<小时/>

编辑

这是我找到的最接近的示例，但这只是一个扩展对象的指示符/变量，而不是 jQuery/js 对象的方法:

$(文档).tooltip.temporarilyOff然后当我初始化 jQuery 工具提示时，我只需要在 open 中添加一个检查:

var settings = {};
settings.tooltipClass = "tooltip";
settings.open = function (event, ui) {
    if ($(document).tooltip.temporarilyOff) {
        ui.tooltip.stop().remove();
    }
};

$(document).tooltip(settings);

//set the variable of the object 
$(document).tooltip.temporarilyOff = true;

搞砸的是我想我不知道我正在寻找的是一个插件。哎哟! jQuery 文档一直都有我的例子。我想现在只剩下传递参数了

$.fn.greenify = function() {
    this.css( "color", "green" );
};

$( "a" ).greenify(); // Makes all the links green.

Answer 1

给你:

我扩展了解决方案以从数据属性中提取最大长度，因此它对您来说更加灵活。

<input type="text" class="max-length" data-maxlength="5"> <input type="text" data-maxlength="3" class="max-length" />
<script type="text/javascript">
    //https://learn.jquery.com/plugins/basic-plugin-creation/

(function( $ ) { //Protect the $ Alias and Adding Scope
  $.fn.restrictLength = function(lengthVal) {
      //This plugin will work for all the elements that match the selector
      return this.each(function() {
        //Capture the keypress event and evaluate the input value length
        $(this).keypress(function(e) {
          //Make sure the data attribute is a number, else allow unrestricted max value
          //prevents hex and other number with alphas
          this.value = this.value.replace(/[^0-9.]/g,'');
          var dataMax = !isNaN($(this).data('maxlength')) ? $(this).data('maxlength') : ($(this).val().length+1);
          //Use the passed in value if it exists, if not use the data attribute (if it exists and is a nummber), else make it longer than the current value (not restricted)
         var length = !isNaN(lengthVal) ? lengthVal : dataMax;
         if ($(this).val().length >= length) { 
           //String is too long, don't execute the event
            return false;
          } else {
            //String length is good, allow the keyPress event to continue
            return true;
          }
        });
      });

  };
}( jQuery ));


$(document).ready(function() {
 // $(".max-length").restrictLength(4);  //Restrict all fields to 4 characters
  $(".max-length").restrictLength();  //Each field will be restricted to its data attribute value
})
</script>

代码笔:http://codepen.io/nobrien/pen/MyVRXd