jQuery`.is (“: visible”)`Chrome에서 작동하지 않습니다

207

if ($("#makespan").is(":visible") == true) { 
    var make = $("#make").val(); 
}
else {
    var make = $("#othermake").val(); 
}

Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake>&nbsp;-&nbsp;<span id=othermakecancel class=txtbutton>Cancel</span></span>

위의 코드는 Firefox에서 원활하게 실행되지만 Chrome에서는 작동하지 않는 것 같습니다. Chrome에서는 .is(":visible") = false때에도 표시됩니다 true.

다음 jQuery 버전을 사용하고 있습니다 : jquery-1.4.3.min.js

jsFiddle 링크 : http://jsfiddle.net/WJU2r/4/

jquery google-chrome

— 사드 바시르
소스

1

바람직하게는 jsfiddle 링크에서? jquery.latest로 확인하십시오.

— xaxxon

makaspan이 표시 : 없음 또는 가시성 : 숨김?

— Artur Keyan

jQuery 버그를 배제하기 위해 일시적으로 최신 jQuery 버전으로 업데이트 할 수 있습니까?

— Strelok

1

또한보십시오 : bugs.jquery.com/ticket/13132 버전 1.12 / 2.2에서 수정 된 것처럼 보입니다! –

— Glen Little

1

(. $는 ( "#의 makespan은")입니다 ( ": 보이는")가) 경우 : enougth 인 경우 문을 writting에서 "== true"를 추가 할 필요가 없습니다

— marcdahan

273

:visibleChrome의 일부 인라인 요소에서는 jQuery 선택기가 작동하지 않는 것 같습니다 . 해결책은 디스플레이 스타일을 추가 "block"하거나 "inline-block"작동시키는 것입니다.

또한 jQuery는 많은 개발자와는 다르게 보이는 것에 대한 정의가 약간 다릅니다.

요소가 문서에서 공간을 소비하면 표시되는 것으로 간주됩니다.
보이는 요소의 너비 나 높이가 0보다 큽니다.

즉, 요소는 공간을 소비하고 볼 수 있도록 너비와 높이가 0이 아니어야합니다.

배치에서 공간을 여전히 소비하므로 요소가 visibility: hidden있거나 opacity: 0표시되는 것으로 간주됩니다.

반면에 불투명도가 0으로 visibility설정되어 hidden있거나 불투명도가 0 인 경우에도 :visible공간을 소비하므로 jQuery에 여전히 영향 을 미치므로 CSS에 가시성이 숨겨져 있다고 명시 적으로 혼동 할 수 있습니다.

문서에없는 요소는 숨겨진 것으로 간주됩니다. jQuery는 해당 스타일에 따라 문서에 추가 될 때 표시되는지 알 수있는 방법이 없습니다.

선택한 상태에 관계없이 모든 옵션 요소는 숨겨진 것으로 간주됩니다.

요소를 숨기는 애니메이션 중에는 요소가 애니메이션이 끝날 때까지 표시되는 것으로 간주됩니다. 애니메이션에서 요소를 표시하는 동안 요소는 애니메이션의 시작 부분에서 볼 수있는 것으로 간주됩니다.

쉽게 볼 수있는 방법은 화면에서 요소를 볼 수 있으면 내용을 볼 수 없거나 투명 등의 이유로 볼 수 있다는 것입니다. 즉, 공간을 차지합니다.

마크 업을 약간 정리하고 표시 스타일을 추가했습니다 ( 예 : 요소 표시를 "block"등으로 설정 ).

깡깡이

에 대한 공식 API 참조 :visible

jQuery 3부터 정의 :visible가 약간 변경되었습니다.

jQuery를 3 약간의 의미를 수정한다 :visible(그러므로의가 :hidden).
이 버전부터는 :visible너비 및 / 또는 높이가 0 인 레이아웃 상자를 포함하여 레이아웃 상자가있는 요소가 고려 됩니다. 예를 들어 br내용이없는 요소 및 인라인 요소는 :visible선택기에 의해 선택됩니다.

— 아데 네오
소스

또한 jsFiddle에 개별 구성 요소를 붙여 넣으려고 시도했지만 정상적으로 작동했습니다. jsFiddle에서 오류를 복제 한 다음 링크를 게시하려고합니다. 아마도 코드의 다른 무언가가이 오류를 일으킨 것입니다

— Saad Bashir

다음 링크에서 문제를 복제했습니다. jsfiddle.net/WJU2r/3

— Saad Bashir

3

고마워요! 왜 그런지 모르겠지만 #makespan {display : block; } 작동하게 만들었습니다.

— Saad Bashir

원본 포스터의 주석에는 실제 솔루션 IE가 포함되어 있으며 스팬을 표시 : 차단합니다. 크롬에서는 기본적으로 스팬이 보이지 않습니다.

— Jeff Davis

& nbsp;를 추가하면 충분합니다. 요소에 내용이없는 경우 Chrome에서 보이지 않기 때문에 – 요소에 표시

— Briganti

67

코드가 크롬에서 작동하지 않는 이유를 모르겠지만 몇 가지 해결 방법을 사용하는 것이 좋습니다.

$el.is(':visible') === $el.is(':not(:hidden)');

또는

$el.is(':visible') === !$el.is(':hidden');

jQuery가 크롬으로 나쁜 결과를 낳았다 고 확신하는 경우 CSS 규칙 검사를 사용할 수 있습니다.

if($el.css('display') !== 'none') {
    // i'm visible
}

또한 이전 버전의 버그가 수정되어 최신 jQuery 를 사용할 수도 있습니다.

— gion_13
소스

2

다음 링크에서 문제를 복제했습니다. jsfiddle.net/WJU2r/3

— Saad Bashir

이 질문은 차이가 사이에 무엇인지 자세히 설명 :hidden하고 :not(:visible). stackoverflow.com/questions/17425543/…

— Mark Schultheiss

is ( ': visible') 또는 .is ( ': hidden') 또는 is ( ': not (: hidden)') 함수는 성능이 매우 나쁩니다

— Diogo Cid

9

요소가 display: inlinejQuery 로 설정된 경우 가시성 검사가 실패 하는 이상한 경우 가 있습니다.

예:

CSS

#myspan {display: inline;}

jQuery

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

이 문제를 해결하려면 jQuery를과 이상의 요소를 숨길 수 있습니다 show/hide또는 toggle()잘 작동합니다.

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});

— 알렉스 라쉬 코프
소스

PhantomJS 에서이 문제가 있지만 Chrome 47.0.2526에서는 작동하는 것 같습니다. 참조 : jsfiddle.net/k4b925gn/2

— ekkis

8

동일한 페이지의 다른 위치가 제대로 작동하기 때문에 HTML의 단점과 관련이 있다고 가정합니다.

이 문제를 해결할 수있는 유일한 방법은 다음과 같습니다.

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}

— 크리스 듀 트로
소스

7

jquery 문서를 읽으면 무언가가 보이지 않거나 숨겨져 있지 않은 여러 가지 이유가 있습니다.

CSS 표시 값이 none입니다.

유형이 "hidden"인 양식 요소입니다.

너비와 높이는 명시 적으로 0으로 설정됩니다.

조상 요소가 숨겨져 있으므로 요소가 페이지에 표시되지 않습니다.

http://api.jquery.com/visible-selector/

다음은 하나의 보이는 요소와 하나의 숨겨진 요소가있는 작은 jsfiddle 예제입니다.

http://jsfiddle.net/tNjLb/

— 삭손
소스

다음 링크에서 문제를 복제했습니다. jsfiddle.net/WJU2r/3

— Saad Bashir

7

Internet Explorer, Chrome, Firefox ...

크로스 브라우저 함수 "isVisible ()"

//check if exist and is visible
function isVisible(id) {
    var element = $('#' + id);
    if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
        return true;
    } else {
        return false;
    }
}

전체 예 :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            //check if exist and is visible
            function isVisible(id) {
                var element = $('#' + id);
                if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
                    return true;
                } else {
                    return false;
                }
            }

            function check(id) {
                if (isVisible(id)) {
                    alert('visible: true');
                } else {
                    alert('visible: false');
                }
                return false;
            }
        </script>

        <style type="text/css">
            #fullname{
                display: none;
            }
            #vote{
                visibility: hidden;
            }
        </style>
        <title>Full example: isVisible function</title>
    </head>
    <body>
        <div id="hello-world">
            Hello World!
        </div>
        <div id="fullname">
            Fernando Mosquera Catarecha
        </div>
        <div id="vote">
            rate it!
        </div>
        <a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
        <a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
        <a href="#" onclick="check('vote');">Check isVisible('vote')</a>
    </body>
</html>

문안 인사,

페르난도

— 페르난도
소스

3

일반적으로 객체의 부모가 숨겨져있을 때이 상황을 겪습니다. 예를 들어 html이 다음과 같은 경우 :

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

자녀가 다음과 같이 보이는지 묻는 경우 :

    $(".div-child").is(":visible");

부모가 보이지 않기 때문에 false를 반환하므로 div도 보이지 않습니다.

— cenk ebret
소스

내 솔루션을 낮추십시오 ... 자식 세트 디스플레이를 '상속'으로 설정하면 부모 항목의 상태가 복사되므로 숨겨진 경우 elemtn.is ( ": hidden") 작동합니다

— patrick

3

요소가 표시되는지 확인하기위한 크로스 브라우저 / 버전 솔루션은 표시 / 숨기기에서 요소에 CSS 클래스를 추가 / 제거하는 것입니다. 요소의 기본 (표시) 상태는 다음과 같습니다.

<span id="span1" class="visible">Span text</span>

그런 다음 숨길 때 클래스를 제거하십시오.

$("#span1").removeClass("visible").hide();

표시되면 다시 추가하십시오.

$("#span1").addClass("visible").show();

그런 다음 요소가 표시되는지 확인하려면 다음을 사용하십시오.

if ($("#span1").hasClass("visible")) { // do something }

이것은 또한 jQuery의 문서에서 지적한 ": visible"선택기의 과도한 사용으로 발생할 수있는 성능 관련 문제를 해결합니다.

이 선택기를 사용하면 가시성이 결정되기 전에 브라우저가 페이지를 다시 렌더링해야 할 수 있으므로 성능에 많은 영향을 줄 수 있습니다. 예를 들어 클래스를 사용하여 다른 방법을 통해 요소의 가시성을 추적하면 성능이 향상 될 수 있습니다.

": visible"선택기에 대한 공식 jQuery API 문서

— 알렉스
소스

1

부모에 다음 스타일을 추가하고 .is ( ": visible") 작동했습니다.

디스플레이 : 인라인 블록;

— 호라 티우
소스

0

항목이 숨겨진 항목의 하위 항목 인 경우 is ( ": visible")은 true를 리턴하며 이는 올바르지 않습니다.

방금 자식 항목에 "display : inherit"를 추가하여이 문제를 해결했습니다. 이것은 나를 위해 그것을 고칠 것입니다 :

<div class="parent">
   <div class="child">
   </div>
<div>

그리고 CSS :

.parent{
   display: hidden;
}
.child{
   display: inherit;
}

이제 부모의 가시성을 변경하여 항목을 효과적으로 켜고 끌 수 있으며 $ (element) .is ( ": visible")은 부모 항목의 가시성을 반환합니다.

— 패트릭
소스

0

이것은 is ( ": visible")이 호출 될 때 실행되는 jquery.js의 코드입니다.

if (jQuery.expr && jQuery.expr.filters){

    jQuery.expr.filters.hidden = function( elem ) {
        return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
    };

    jQuery.expr.filters.visible = function( elem ) {
        return !jQuery.expr.filters.hidden( elem );
    };
}

보시다시피 CSS 표시 속성 이상을 사용합니다. 또한 요소 내용의 너비와 높이에 따라 다릅니다. 따라서 요소의 너비와 높이를 확인하십시오. 이 작업을 수행하려면 display 속성을 "inline-block"또는 "block"

— 쿨 쿠르
소스

0

내가 사용에 필요한 가시성 : 숨겨진 의 insted하지 표시 : 없음을 하기 때문에 가시성이 이벤트를 취하면서 표시 하지 않습니다.

그래서 나는 .attr('visibility') === "visible"

— 밋 자예 즈
소스