jQuery函数在单个函数中不起作用，但是当拆分时 - 知道为什么！将不胜感激

Question

$emailValidate.on('blur', function() {
if (!$(this).val().match($emailRegx)) {
$(this).closest('.emailed_field').find('.tooltips7 span').addClass('mod_span');
} else if ($(this).val().match($emailRegx)) {
$(this).closest('.emailed_field').find('.tooltips7 span').removeClass('mod_span');
}
else if ($(this).val().trim() =='') {
$(this).closest('.emailed_field').find('.tooltips7 span').removeClass('mod_span');
$(this).closest('.emailed_field').find('.tooltips8 span').addClass('mod_span');
}
});

上面的代码不能在一个函数中全部工作，但是下面的代码可以工作-不知道魔术-这只是一个重复的函数

$emailValidate.on('blur', function() {
if (!$(this).val().match($emailRegx)) {
$(this).closest('.emailed_field').find('.tooltips7 span').addClass('mod_span');
} else if ($(this).val().match($emailRegx)) {
$(this).closest('.emailed_field').find('.tooltips7 span').removeClass('mod_span');
}
});
$emailValidate.on('blur', function(){
if ($(this).val().trim() =='') {
$(this).closest('.emailed_field').find('.tooltips7 span').removeClass('mod_span');
$(this).closest('.emailed_field').find('.tooltips8 span').addClass('mod_span');
}
});

Answer 1

有两个半独立的逻辑要执行:

• 检查emailRegx是否匹配并做一些分支作为结果
• 检查输入是否为空，并做一些事情作为结果

将底部的else if更改为if，因为它是单独的。

$emailValidate.on('blur', function () {
if (!$(this).val().match($emailRegx)) {
$(this).closest('.emailed_field').find('.tooltips7 span').addClass('mod_span');
} else if ($(this).val().match($emailRegx)) {
$(this).closest('.emailed_field').find('.tooltips7 span').removeClass('mod_span');
}
if ($(this).val().trim() == '') {
$(this).closest('.emailed_field').find('.tooltips7 span').removeClass('mod_span');
$(this).closest('.emailed_field').find('.tooltips8 span').addClass('mod_span');
}
});

或者，更简洁地说，使用toggleClass并将元素保存在变量中:

$emailValidate.on('blur', function () {
const emailedField = $(this).closest('.emailed_field');
emailedField.find('.tooltips7 span').toggleClass(
'mod_span',
!$(this).val().match($emailRegx)
);
if ($(this).val().trim() == '') {
emailedField.find('.tooltips7 span').removeClass('mod_span');
emailedField.find('.tooltips8 span').addClass('mod_span');
}
});