이 자바 스크립트를 단축 할 수 있습니까?

Question

누구나이 코드를 단축하는 방법이나 예제가 좋을 것이라고 말할 수 있습니까? 배열이 최선의 방법일까요?

$(document).ready(function(){ 
$("#parent1").css("display","none"); 

$(".aboveage1").click(function(){ 
    if ($('input[name=age1]:checked').val() == "No") { 
     $("#parent1").slideDown("fast"); //Slide Down Effect 
    } else { 
     $("#parent1").slideUp("fast"); //Slide Up Effect 
    } 
});    
}); 


$(document).ready(function(){ 
$("#parent2").css("display","none"); 

$(".aboveage2").click(function(){ 
    if ($('input[name=age2]:checked').val() == "No") { 
     $("#parent2").slideDown("fast"); //Slide Down Effect 
    } else { 
     $("#parent2").slideUp("fast"); //Slide Up Effect 
    } 
});    
}); 

$(document).ready(function(){ 
$("#parent3").css("display","none"); 

$(".aboveage3").click(function(){ 
    if ($('input[name=age3]:checked').val() == "No") { 
     $("#parent3").slideDown("fast"); //Slide Down Effect 
    } else { 
     $("#parent3").slideUp("fast"); //Slide Up Effect 
    } 
});    
}); 

Answer 1

HTML과 CSS를 더 많이 마셔야합니다. 결과적으로 자바 스크립트가 3 번 같은 처리기 코드 ;-)

Answer 2

당신은 루프 여기

for(var i = 1; i < 4; i++) { 

$("#parent"+string(i)).css("display","none"); 

$(".aboveage"+string(i)).click(function(){ 
    if ($('input[name=age'+string(i)+']:checked').val() == "No") { 
     $("#parent"+string(i)).slideDown("fast"); //Slide Down Effect 
    } else { 
    $("#parent"+string(i)).slideUp("fast"); //Slide Up Effect 
    } 
}); 
} 

Answer 3

을 위해 사용할 수 등록 할 필요가 없습니다 내가 준수 원칙의 일부는 만드는 순서대로 읽기 쉽고 우아하고 간결한 코드 :

• 코드 논리와 데이터를 분리하면 논리가 한 번만 나타납니다. 그것은 다른 데이터에서 작동 할 수 있습니다. 이는 주로 수정해야하는 경우 한 곳에서 수정하면 다른 곳을 수정하는 것을 잊지 않을 것이라는 것을 의미합니다.

• CSS의 스타일을 초기 상태로 설정하고 변경해야하는 경우 자바 스크립트로 터치합니다.

• 3 개의 요소에 고유 한 클래스 만 지정하는 대신 '슬라이드 가능'과 같은 확인란을 'age-checkbox'와 같은 일반적인 동작을 설명하는 클래스를 제공하십시오. 이제 개별적으로 참조하지 않고 jquery로 모든 항목을 찾을 수 있습니다.

은 코드 형식이 의미 론적 구조에 해당하는지 확인

• 피하기 익명의 인라인 함수 (가독성을 많이하는 데 도움). 매개 변수 목록의 함수를 인라인하면 코드 구조가 흐려집니다. 정말로 그렇게해야한다면, 최소한 디버깅과 프로파일 링을 할 때 '익명의 함수'로 보이지 않도록 이름을 지정하십시오.

제작에 들어가기 전에 코드 리뷰를 요청해 주셔서 감사합니다. 더 많은 사람들이 그렇게한다면 우리는 많은 버그를 제기 할 필요가 없을 것입니다.

이것은 영감을 줄 수있는 것입니다. 나는 그것이 작동한다고 주장하지 않는다. 나는 jquery 함수의 정확한 기능을 검증하지 않았고 html 구조에 대한 가정을했다. 나는 이것을 할 수있는 최선의 방법이라고 주장하지 않고, html 구조에 대한 정보와 이것에 넣을 용의가 있다고 생각하면 아이디어를 얻어야한다.

.slidable 
{ 
    display: none; 
} 


<form ...> 

    <div id="#parent1" class="slidable"> 

     <div class="aboveage1 slidebutton"></div> 

     <input class="age-checkbox" type="checkbox" name="age1" /> 

    </div> 

</form> 


$(document).ready(function documentReady() 
{ 
    $(".slidebutton").each(attachSlide); 


    function attachSlide() 
    { 
     $(this).click(slide); 
    } 


    function slide(event) 
    { 
     var cb = $(event.target).parent().children('.age-checkbox'); 


     if(cb.val() == "No") 

      cb.parent().slideDown("fast"); //Slide Down Effect 


     else 

      cb.parent().slideUp("fast"); //Slide Up Effect 
    } 

});