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

Question

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

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

这是我目前所掌握的，但我知道我还没有走上正确的轨道。或者更好的是，还创建另一个插件来设置 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); //更喜欢这个，因为这是我想使用它的方式？

或

乙：maxLength($("#Textbox"), 2);

编辑

这是我找到的最接近的示例，但这只是一个扩展对象的 indicator/variable 而不是 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 文档一直都有我的例子。我想现在只剩下 args 的传递了

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

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

How to use jQuery extend method to create a custom plugin for element or class selectors

javascript

jquery

jquery-selectors