$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');
}
});
아래 두 가지 로직으로 분리해봤습니다.
아래쪽에 있는 else if를 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');
}
});
© 2022 pinfo. All rights reserved.