다음을 사용하여 요소의 가시성을 전환하려면 어떻게 해야 합니까?.hide(),.show(), 또는.toggle()?
요소를 테스트하려면 어떻게 해야 합니까?visible또는hidden?
질문에 대한 답변
질문은 단일 요소를 가리키기 때문에 다음 코드가 더 적합할 수 있습니다.
// Checks CSS content for display:[none block], ignores visibility:[true false] $(element).is(":visible");
// The same works with hidden $(element).is(":hidden"); 이는 twernt의 제안과 동일하지만 단일 요소에 적용되며 jQuery FAQ에서 권장하는 알고리즘과 일치합니다.
jQuery is()를 사용하여 선택한 요소를 다른 요소, 셀렉터 또는 임의의 jQuery 개체로 확인합니다.이 메서드는 DOM 요소를 따라 이동하여 일치하는 항목을 찾습니다.이러한 메서드는 전달된 파라미터를 충족합니다.일치하는 경우 true를 반환하고 일치하지 않으면 false를 반환합니다.
실렉터를 사용할 수 있습니다.
// Matches all elements that are hidden $('element:hidden') 그리고 셀렉터:
// Matches all elements that are visible $('element:visible') if ( $(element).css('display') == 'none'
$(element).css("visibility") == "hidden"){
// 'element' is hidden } 위의 방법에서는 부모의 가시성은 고려되지 않습니다.부모도 고려해야 합니다..is(":hidden")또는.is(":visible").
예를들면,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div> </div> 위의 방법에서는 다음 사항을 고려합니다.
div2와 동시에 보이다:visible그러나 위의 내용은 많은 경우에 도움이 될 수 있습니다. 특히 숨겨진 부모에 에러 디브(div)가 표시되는지 여부를 찾아야 할 때, 이러한 상황에서는:visible동작하지 않습니다.
이 답변들 중 어느 것도 질문이라고 이해되는 것을 다루지 않고, 제가 찾고 있던 것은 “어떻게 해야 하나요?”입니다.둘 다 아니다.:visible도 아니다:hidden둘 다 매뉴얼에 따라 표시를 요구하고 있기 때문에, 이 문제는 해결됩니다.제가 판단한 바로는 CSS 가시성을 처리할 셀렉터가 없습니다.해결 방법은 다음과 같습니다(표준 jQuery 셀렉터, 보다 축약된 구문이 있을 수 있습니다).
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
} }); 토글된 요소의 상태를 확인하려면 어떻게 해야 합니까?
요소의 축소 여부를 판별하려면:visible그리고.:hidden셀렉터
var isVisible = $('#myDiv').is(':visible'); var isHidden = $('#myDiv').is(':hidden'); 단순히 가시성에 따라 요소를 조작하는 경우 다음을 포함할 수 있습니다.:visible또는:hidden셀렉터 표현으로 지정합니다.예를 들어 다음과 같습니다.
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');