자바 스크립트를 작성하는 또 다른 방법

Question

다음을 작성하는 또 다른 간결한 방법은 무엇입니까? 기본적으로 그것은 condtion에 따라 2 버튼의 가시성을 토글합니다.

$("#myCheckBox").click(function() { 
    if (window.console && window.console.log) 
     console.log("billing only checked? " + this.checked); 
    if (this.checked) { 
     $("#btnNext").hide(); 
     $("#btnFinish").show(); 
    } 
    else { 
     $("#btnNext").show(); 
     $("#btnFinish").hide(); 
    } 
}); 

보다 효율적인 방법을 찾고 있습니까?

Answer 1

당신은 요소가 표시하거나 숨길해야하는지 여부를 나타내는 인수 받아 .toggle 사용할 수 있습니다 : 가시성이 제대로 처음부터 설정

$("#btnNext").toggle(!this.checked); 
$("#btnFinish").toggle(this.checked); 

경우에도 통과 할 필요는 없습니다 인수 :

$("#btnNext, #btnFinish").toggle(); 

---

그래도 가독성에 관한 다른 사람과 동의합니다. .toggle 그 자체로는 여전히 이해할 수 있지만 .toggle(!this.checked)은 더 이해하기 어려워 질 수 있습니다.

그것은 100 % 효율적하지 않을 수 있습니다

Answer 2

- 당신이 영리한 원 또는 무언가를 사용하여이를 축소 할 수 있습니다 확신은 (편집 : 펠릭스 클링 이미 좋은 일이있다) - 그러나 다른 한편으로, 그것은 완벽하다 심지어이 프로젝트에 익숙하지 않은 사람을 위해서도이 방법을 읽을 수 있습니다.

내 경향은 그대로 두는 것이 좋습니다.

Answer 3

토글() 함수를 사용하여 - http://api.jquery.com/toggle/

Answer 4

사용할 수 .toggle()을이에

if (this.checked) { 
    $("#btnNext").hide(); 
    $("#btnFinish").show(); 
} 
else { 
    $("#btnNext").show(); 
    $("#btnFinish").hide(); 
} 

:

$("#btnNext").toggle(!this.checked); 
$("#btnFinish").toggle(this.checked); 

Answer 5

당신은이를 줄일 수 있습니다올바른 show 및 hide 상태로 시작한다고 가정하면 다음을 수행 할 수 있습니다.

$("#myCheckBox").click(function() { 
    if (window.console && window.console.log) { 
    console.log("billing only checked? " + this.checked); 
    } 
    $("#btnNext").toggle(); 
    $("#btnFinish").toggle(); 
} 

Answer 6

$("#myCheckBox").click(function() { 
    if (window.console && window.console.log) 
     console.log("billing only checked? " + this.checked); 
    $("#btnNext").toggle(!this.checked); 
    $("#btnFinish").toggle(this.checked); 
}); 

Answer 7

표시/숨기기 대신 .toggle()을 사용할 수 있습니다. 그러면 if/else 구문을 제거 할 수 있습니다.