我已经编写 JS(主要是 jQuery)好几个月了,但今天我决定将我的第一个抽象作为 jQuery 方法。我已经有了可用的代码,但我觉得/知道我的做法不对,所以我来这里寻求启发。
注意:请不要回答说已经有一些东西可以解决这个问题,因为我已经知道了。我对这件事的兴趣是很有教育意义的。
我的代码打算做什么(并且做了什么):
限制文本字段的字符并在用户接近末尾时更改计数器的颜色。
这就是我所拥有的:
$(function(){
$('#bio textarea').keyup(function(){
$(this).char_length_validation({
maxlength: 500,
warning: 50,
validationSelector: '#bio .note'
})
})
$('#bio textarea').trigger('keyup');
})
jQuery.fn.char_length_validation = function(opts){
chars_left = opts.maxlength - this.val().length;
if(chars_left >= 0){
$(opts.validationSelector + ' .value').text(chars_left);
if(chars_left < opts.warning){
$(opts.validationSelector).addClass('invalid');
}
else{
$(opts.validationSelector).removeClass('invalid');
}
}
else{
this.value = this.value.substring(0, opts.maxlength);
}
}
在 HTML 中:
<div id="bio">
<textarea>Some text</textarea>
<p class="note>
<span class="value">XX</span>
<span> characters left</span>
</p>
</div>
特别是我觉得在每个 keyup 上分别绑定(bind)事件而不是绑定(bind)一次并稍后调用方法真的很不舒服。
此外,(因此标题)我需要首先调用该方法(当页面呈现时),然后每次用户输入一个字符时调用该方法。
提前感谢您的宝贵时间:)
最佳答案
chars_left
是一个全局变量,一点也不好。这是一个更好的(略有改动的)版本:
jQuery.fn.char_length_validation = function(opts) {
this.each(function() {
var chars_left = opts.maxlength - $(this).val().length;
$(this).keyup(function() {
chars_left = opts.maxlength - $(this).val().length;
if (chars_left >= 0) {
$(opts.validationSelector).text(chars_left);
if (chars_left < opts.warning) {
$(opts.validationSelector).addClass('invalid');
}
else {
$(opts.validationSelector).removeClass('invalid');
}
}
else {
$(this).val($(this).val().substring(0, opts.maxlength));
}
});
});
this.keyup(); // makes the "initial" execution
return this;
};
查看 DEMO .
一些解释:
- 在函数中的 jQuery 插件中,
this
引用由选择器选择的元素。您应该使用this.each()
遍历所有这些并相应地设置每个元素。 - 在此示例中,每个元素都在
chars_left
变量上获取。传递给keyup()
的事件处理程序可以访问它,因为它是一个闭包。 更新: 这里已经很晚了 ;) 没有必要在这里声明它,因为无论如何您每次都重新计算该值。不过,它应该会让您了解如何拥有随时间持续存在的私有(private)变量。 - 您应该始终
返回此
以支持链接。
进一步的思考:
- 您可能需要考虑如何让它适用于多个文本区域(即您必须考虑验证选择器)。不要将其绑定(bind)到特定结构。
- 您应该有默认选项。
- 更新:当然,您可以让您的插件只与一个文本区域一起工作(就像某些 jQuery 函数一样)。
关于javascript - 在声明时调用 jQuery 方法,然后调用 onEvent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4542922/