반복하는 대신 자바 스크립트 줄을 반복하는 방법

Question

안녕하세요 모두 내 프런트 엔드 개발을 위해 j 쿼리를 사용하고 있습니다. js에 내 초반 질문을 작성할 수있는 jb가 꽤 있습니다. 모든 요소에 대해 단일 클릭 이벤트 함수를 작성할 수있는 가능한 방법이 있습니다. 왜냐하면 evey 시간은 모든 요소의 ID를 사용하기 때문입니다. 이렇게.

HTML

<a id="get-in" class="">Login 
    <div class="log-n-contanier"> 
     <form id="login"> 
     <input type="text" placeholder="Email Address" /> 
     <br> 
     <input type="password" placeholder="Password" /> 
     <br> 
<button class="btn blue med large" id="login-trigger">LOGIN</button> 
<span id="forgot-trigger">forgot password?</span> 
</form> 
<form id="forgot"> 
<input type="text" placeholder="Email Address" /> 
     <br> 
    <button class="btn blue med large">Send Instructions</button> 
    <span id="cancel-trigger">cancel</span> 
    </form> 
    </div> 
</a> 

$('button, a').click(function(){ 
    ids=$(this).attr('id'); 
    if(ids=='get-in'){ 

     $('.log-n-contanier').show(); 
     $(this).addClass('active'); 
    } 
     else if(ids=='login-trigger') 
     { 
      alert('you were loggging'); 
     } 
     else if(ids=='forgot-trigger'){ 
      $('#login').hide(); 
      $('#forgot').show(); 
     } 
     else if(ids=='cancel-trigger'){ 
      $('#forgot').hide(); 
      $('#login').show(); 
     } 
     else{ 
      alert('over'); 
     } 
    }); 

방법 event bindings 등을 사용하여 코드를 작게를하는

..? 모든 tym 내가 ID 이름이나 클래스 이름을 써야하기 때문에 ..! 그게 바로 쓰는가 아니면 다른 방법으로 ..?

Answer 1

jQuery에서 반환 한 객체를 캐시하도록 제안합니다. 그것은 성능 관점에서 더 좋으며 가독성도 향상시킵니다. 예를 들어, 대신 $를 반복하는 다시를 ('# 잊었다') 다시 당신이 작성해야 :

var forgotButton = $('#forgot'); 
... 
forgotButton.hide(); 

당신이 코드의 상단에있는 모든 JQuery와-참조를 배치 할 수 있습니다이 방법을 사용. 나중에 다른 라이브러리로 전환하려면 한 곳에서만 변경해야합니다.

Answer 2

반복 횟수가 너무 적어서 걱정할 필요가 없습니다.

$('#get-in').on('click', function(){ 
    $('.log-n-contanier').show(); 
    $(this).addClass('active'); 
}); 

$(#'login-trigger').on('click', function() { 
    alert('you were loggging'); 
}); 

$('#forgot-trigger').on('click', function() { 
    $('#login').hide(); 
    $('#forgot').show(); 
}); 

$('#cancel-trigger').on('click', function() { 
    $('#forgot').hide(); 
    $('#login').show(); 
}); 

: 당신이 입니다 따라서 브라우저 대신 if (id === ...) 지점의 전체 시리즈를 쓰는 오른쪽 처리기에 직접 이벤트를 전달 할 수 있도록, 각 링크에 대해 별도의 이벤트 핸들러를 등록 할해야하지만 무엇

은 반복 기능이 다루기 힘들지 않는 한 리팩토링에 대해 걱정하지 마십시오. 난 항상이 이벤트 등록 전화, 그리고 이벤트 트리거 호출임을 강조 .click보다는 .on('click', ...)을 사용하여도

참고.