jQuery에서 함수 한개로 만들면 작동하지 않지만 분할하면 작동되는 이유

1개월 전 질문 1개월 전 토론 10 views

$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');
        }

    });

jquery

2022-05-22 09:36

1개의 해답

아래 두 가지 로직으로 분리해봤습니다.

  • emailRegx가 일치하는지 확인하고 결과에 대한 작업을 수행합니다.
  • 입력이 비어 있는지 확인하고 결과에 대한 작업을 수행합니다.

 아래쪽에 있는 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-05-22 09:43

해결방법이나 팁을 알고 계신다면


© 2022 pinfo. All rights reserved.