gpt4 book ai didi

javascript - 在声明时调用 jQuery 方法,然后调用 onEvent

转载 作者:行者123 更新时间:2023-11-29 20:20:00 25 4
gpt4 key购买 nike

我已经编写 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com