부울로 요소 숨기기 / 표시

109

나는 내 코드에 이것들이 많은 경향이 있습니다.

if(shouldElementBeVisible)
    $element.show()
else
    $element.hide()

자바 스크립트, jquery 또는 밑줄로 패키징 된 더 우아한 방법이 있습니까? 이상적으로는 이와 같은 것을 원합니다.

$element.showOrHideDependingOn(shouldElementBeVisible)

javascript jquery underscore.js visibility

— 아킬 페르난데스
소스

jQuery를 표시하거나 숨길

— 조지

@SpencerWieczorek 질문 참조 일어나는 것을 toggle,하지만 다른 질문

— Aakil 페르난데스

166

분명히 toggle함수에 부울을 전달할 수 있습니다.

$element.toggle(shouldElementBeVisible)

— 아킬 페르난데스
소스

34

물론 변수가 부울 값이라는 것이 확실하지 않다면 실수로 다른 "오버로드"중 하나를 누르는$element.toggle(!!shouldElementBeVisible) 것을 방지하기 위해를 사용 하는 것이 좋습니다 .

— Jeroen

7

더 나은 옵션은 $element.toggle(shouldElementBeVisible == true).

— jox

"0"그리고 어쨌든 "false"매우 다르게 취급 false되므로 구별이 실제로 중요하지 않다고 생각합니다. 0모든 애니메이션 시간이 설정되었지만 여전히 가시성을 뒤집기 때문에 숨기고 싶다면 틀릴 수도 있습니다.

— Tasgall

19

네, 있습니다!

$element.toggle();

매개 변수가 없으면 toggle요소 가시성을 토글하고 ( visibility속성을 의미하는 것은 아님 ) 요소의 현재 상태에 따라 달라집니다.

$element.toggle(display);

당신이 호출하면 toggle부울 매개 변수 요소는 경우 표시됩니다 true및 hidden이 경우false

— 잭 스펜서
소스

2

나는 이것을 잘못 표시하려고했지만 마지막 API 참조를 사용하면 옵션 객체 대신 부울을 설정할 수 있음을 깨달았습니다.

— Aakil Fernandes

그 아래에 몇 줄의 "매개 변수없이는 .toggle () 메서드는 요소의 가시성을 전환"

— 자크 스펜서

2

그것은 실제로 내가 원했던 것과 반대입니다. 요소의 현재 상태와 관련이 없도록하고 싶었습니다. 상태는 부울 변수를 기반으로해야합니다.

— Aakil Fernandes 2015

@AakilFernandes 그래서 변수 isShown가 $element보이는 것과 관련이 없습니까? 그러나 요소와 관련이없는 별도의 변수?

— Spencer Wieczorek

네, 미안 해요 아마의 이름을 변경해야 isShown처럼 뭔가 shouldElementBeVisible더 분명하게

— Aakil 페르난데스에게

2

jQuery에는 http://api.jquery.com/toggle/ 이 있습니다 toggle.

$element.toggle();

숨겨져있는 경우 요소를 표시하고 표시되는 경우 숨 깁니다.

— 마이크
소스

0

이 기능 은 요소 .toggle()의 display를 변경합니다 .

을 변경하려면 visibility대신 ?:연산자를 사용하는 것이 좋습니다 . 이를 위해 CSS에서 가시성을 원래 상태로 설정하고 JS에서 간단히 다음을 입력하십시오.

    var checkboxChecked = $("#yourCheckbox").(":checked");

    $("#yourElement").css("visibility", checkboxChecked ? "visible" : "hidden");

— 멜
소스