我想学习如何编写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();
});
});
});
}
答案 0 :(得分:0)
看看这个项目jQuery plugin boilerplate 将其视为基本的插件定义,查找它,按照步骤操作,并根据需要进行调整。
答案 1 :(得分:0)
您只需使用
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 ()