클릭시 클래스가 제거되지 않음

Question

$(document).ready(function(){ 

      var postcode = $('#postcode-form').val(); 

      function errors(){ 
       if(postcode == ""){ 
        $('#postcode-form').addClass("form-error"); 
       }else{ 
        $('#postcode-form').removeClass("form-error"); 
       } 
      } 

      $('#submit-form').click(errors); 
     }); 

클래스는 양식이 비어있을 때 추가되지만 양식에 세부 정보를 입력하면 제거되지 않습니다. 왜 그런지 모르겠다 고요?

Answer 1

함수 내에서 우편 번호 청크를 이동하십시오. 그렇지 않으면 페이지가로드 될 때 한 번만 값을 가져옵니다. 함수 안에 놓으면 클릭 할 때마다 값을 확인합니다.

function errors() { 
    var postcode = $('#postcode-form').val(); 
    if (postcode == "") { 
     $('#postcode-form').addClass("form-error"); 
    } else { 
     $('#postcode-form').removeClass("form-error"); 
    } 
} 

Answer 2

이제 왜 작동하지 않는지 알 수 있습니다. 나는 실수를 활용할 것이고, 리팩터링을 통해 선택자를 캐쉬 할 것이다!

$(document).ready(function(){ 

     var $postcode = $('#postcode-form'); 

     function errors(){ 
      if($postcode.val() == ""){ 
       $postcode.addClass("form-error"); 
      }else{ 
       $postcode.removeClass("form-error"); 
      } 
     } 

     $('#submit-form').click(errors); 
    });