如何将函数转换为 JQuery 插件答案

【问题标题】：how to convert functions into a JQuery plugin如何将函数转换为 JQuery 插件
【发布时间】：2018-07-06 06:43:38
【问题描述】：

我想学习如何编写 Jquery 插件。这是我的正常功能并将其转换为 jquery 插件，您能建议我如何做到这一点。

这样我就可以很容易地理解如何将函数转换为插件。

function probe_Validity(element) {
  var validate = true;
  $(".required-label").remove();

  var warnings = {
    text: "Please enter Name"
  };

  element.find(".required").each(function() {
    var form_Data = $(this);

    if (form_Data.prop("type").toLowerCase() === 'text' && form_Data.val() === '') {
      form_Data.after('<div class="required-label">' + warnings.text + '</div>').addClass('required-active');
      validate = false;
    }
    if (validate) {
      return true;
    } else {
      return false;
    }

    $(function() {
      $(".required").on("focus click", function() {
        $(this).removeClass('required-active');
        $(this).next().remove();
      });
    });
  });
}

【问题讨论】：

为什么每次找到需要的元素都要加上$(function() { $(".required").on("focus click", function() { $(this).removeClass('required-active'); $(this).next().remove(); }); });？？？它不属于你的函数

标签： javascript jquery plugins jquery-plugins frontend

【解决方案1】：

看看这个项目jQuery plugin boilerplate 将此视为基本插件定义，查找它，按照步骤操作并根据您的需要进行调整。

【讨论】：

【解决方案2】：

使用起来很简单

jQuery.fn.theNameOfYourFunction = function() {}

然后你可以像这样获取调用函数的元素：

var element = $(this[0])

所以你的功能是：

jQuery.fn.probe_Validity = function() {

        var element = $(this[0]);
        var validate = true;
        $(".required-label").remove();

        var warnings = {
            text: "Please enter Name"
        };

        element.find(".required").each(function() {

            var form_Data = $(this);

            if (form_Data.prop("type").toLowerCase() === 'text' && form_Data.val() === '') {
                form_Data.after('<div class="required-label">' + warnings.text + '</div>').addClass('required-active');
                validate = false;
            }
            if (validate) {
                return true;
            } else {
                return false;
            }

            $(function() {
                $(".required").on("focus click", function() {
                    $(this).removeClass('required-active');
                    $(this).next().remove();
                });
            });
        });
    };

可以这样调用：

$('#id').probe_Validity ()

【讨论】：

但是，这仍然会在每次迭代中添加相同的事件侦听器。
非常感谢 Joost_96。它工作正常。