为什么这不管用？如何将调用方对象传递给函数？
为什么这不管用？如何将调用方对象传递给函数？
提问于 2017-04-13 15:35:29
var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator(this));
$('#form_szek').on('keyup', validator(this));
function validator(event){
if(isNaN(event.value)){
$(event).css('border-color', 'red');
submitbutton.addClass('disabled');
}
else{
$(event).css('border-color', 'green');
submitbutton.removeClass('disabled');
}
};因此，我有这个javascript，并且不想编写验证器函数两次。此脚本应该禁用submit按钮，并根据输入将边框涂成红色或绿色。如何将表单元素传递给函数？此外，如何正确禁用表单提交？该按钮不能按下，但如果用户点击进入与文本在里面，它仍然会提交它。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-13 15:39:10
不必将变量传递给事件处理程序，您可以使用this关键字直接访问元素：
var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator);
$('#form_szek').on('keyup', validator);
function validator() {
if (isNaN(this.value)) {
$(this).css('border-color', 'red');
submitbutton.addClass('disabled');
} else {
$(this).css('border-color', 'green');
submitbutton.removeClass('disabled');
}
};注：
避免将event作为变量引用事件处理程序中的元素，它专门用于事件本身。
演示：
这是一个可行的演示：
var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator);
$('#form_szek').on('keyup', validator);
function validator() {
if (isNaN(this.value)) {
$(this).css('border-color', 'red');
submitbutton.addClass('disabled');
} else {
$(this).css('border-color', 'green');
submitbutton.removeClass('disabled');
}
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="form_submit">
<input type="text" id="form_primer">
<input type="text" id="form_szek">
Stack Overflow用户
发布于 2017-04-13 15:40:27
您的函数validator应该在事件的function() {}中。
编辑
将event var更改为object。好的点在那里@进化论盒
var submitbutton = $('#form_submit');
$('#form_primer').on('keyup', function() {
validator(this)
});
$('#form_szek').on('keyup', function() {
validator(this)
});
function validator(object) {
if (isNaN(object.value)) {
$(object).css('border-color', 'red');
submitbutton.addClass('disabled');
} else {
$(object).css('border-color', 'green');
submitbutton.removeClass('disabled');
}
};.disabled {
border: 0;
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="submit" id="form_submit">
<input type="text" id="form_primer">
<input type="text" id="form_szek">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43396404
复制相关文章
相似问题
腾讯云开发者
