jQuery '.is(":visible")'가 Chrome에서 작동하지 않음
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> - <span id=othermakecancel class=txtbutton>Cancel</span></span>
위의 코드는 파이어폭스에서는 부드럽게 실행되지만 크롬에서는 작동하지 않는 것 같습니다.에서는 Chrome으로 됩니다..is(":visible") = false설령 그렇다 하더라도true.
나는 jQuery 버전을 사용하고 있습니다: jquery-1.4.3.min.js.
jsFiddle 링크: http://jsfiddle.net/WJU2r/4/
jQuery인 것 .:visibleChrome의 일부 인라인 요소에 대해 선택기가 작동하지 않습니다.해결책은 다음과 같은 디스플레이 스타일을 추가하는 것입니다."block"또는"inline-block"효과가 있을 거예요
또한 jQuery는 많은 개발자가 볼 수 있는 것에 대한 정의가 다소 다릅니다.
요소가 문서의 공간을 사용하는 경우 요소가 표시되는 것으로 간주됩니다.
보이는 요소의 너비 또는 높이가 0보다 큽니다.
즉, 요소의 너비와 높이가 0이 아니어야 공간을 사용하고 표시할 수 있습니다.
있는 요소
visibility: hidden또는opacity: 0레이아웃에서 여전히 공간을 사용하기 때문에 표시되는 것으로 간주됩니다.
비록 에반그, 록이것비라도.visibility으로 설정됨hidden0이고,입니다. 여전히 그렇습니다.:visible공간을 소비하기 때문에 jQuery로 이동합니다. 이는 CSS가 가시성이 숨겨져 있다고 명시적으로 말할 때 혼동될 수 있습니다.
문서에 없는 요소는 숨겨진 것으로 간주됩니다. jQuery는 해당 유형에 따라 다르므로 문서에 추가할 때 요소를 볼 수 있는지 여부를 알 수 없습니다.
모든 옵션 요소는 선택한 상태에 관계없이 숨겨진 것으로 간주됩니다.
요소를 숨기는 애니메이션 중에는 애니메이션이 끝날 때까지 요소가 표시되는 것으로 간주됩니다.요소를 표시하는 애니메이션 중에는 애니메이션 시작 시 요소가 표시되는 것으로 간주됩니다.
쉽게 볼 수 있는 방법은 화면에서 요소를 볼 수 있다면, 내용을 볼 수 없더라도 투명하게 볼 수 있습니다. 즉, 공간을 차지합니다.
마크업을 조금 정리하고 디스플레이 스타일(예: 요소 표시를 "차단"으로 설정)을 추가했습니다. 이 작업은 다음과 같습니다.
3 jQuery 3의 과 .:visible 바뀌었습니다.
은 jQuery 3의 합니다.
:visible(의):hidden).
이 버부요고려다니됩소가는이터전idered▁will다▁cons▁be로 간주될 것입니다.:visible가로 및/또는 높이가 0인 레이아웃 상자가 있는 경우.를 들면, 들면를예,br는 컨츠가및요선택다에 됩니다.:visibleselector
당신의 코드가 크롬에서 작동하지 않는 이유는 모르겠지만, 몇 가지 해결 방법을 사용하는 것이 좋습니다.
$el.is(':visible') === $el.is(':not(:hidden)');
또는
$el.is(':visible') === !$el.is(':hidden');
만약 당신이 jQuery가 크롬에서 약간의 나쁜 결과를 제공한다고 확신한다면, 당신은 단지 CSS 규칙 검사에 의존할 수 있습니다.
if($el.css('display') !== 'none') {
// i'm visible
}
또한 최신 jQuery는 이전 버전의 버그가 수정되었을 수 있으므로 사용하는 것이 좋습니다.
같은 페이지의 다른 장소들은 잘 작동하기 때문에 우리 HTML의 특이점과 관련이 있다고 생각합니다.
이 문제를 해결할 수 있는 유일한 방법은 다음과 같습니다.
if($('#element_id').css('display') == 'none')
{
// Take element is hidden action
}
else
{
// Take element is visible action
}
가 요가다음설로정경이우있경상다습니우로 설정되어 있으면 이상한 경우가 .display: inline했습니다. jQuery 파일 이름입니다.
예:
CSS
#myspan {display: inline;}
jQuery
$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false
및 수 .show/hide또는toggle()잘 작동할 겁니다.
$('#myspan').hide()
$('#otherElement').on('click', function() {
$('#myspan').toggle();
});
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>
안부 전해요,
페르난도
jquery 문서를 읽는 경우 표시/숨김으로 간주되지 않는 여러 가지 이유가 있습니다.
CSS 표시 값이 none입니다.
형식이 ="숨김"인 폼 요소입니다.
너비와 높이는 0으로 명시적으로 설정됩니다.
상위 요소는 숨겨지므로 해당 요소는 페이지에 표시되지 않습니다.
http://api.jquery.com/visible-selector/
다음은 하나의 가시적 요소와 하나의 숨겨진 요소가 있는 작은 jsfiddle 예제입니다.
요소가 표시되는지 여부를 결정하는 브라우저/버전 교차 솔루션은 표시/숨기기에서 요소에 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 문서
일반적으로 저는 제 물건의 부모님이 숨겨져 있을 때 이 상황을 삽니다.예를 들어 html이 다음과 같은 경우:
<div class="div-parent" style="display:none">
<div class="div-child" style="display:block">
</div>
</div>
다음과 같이 하위 항목이 표시되는지 묻는 경우:
$(".div-child").is(":visible");
상위 항목이 표시되지 않으므로 div도 표시되지 않으므로 false를 반환합니다.
부모에 다음 스타일을 추가했고 .is(":visible")가 작동했습니다.
디스플레이: 인라인 블록;
표시 대신 숨김 표시를 사용해야 합니다. 표시에는 이벤트가 발생하지만 표시에는 이벤트가 발생하지 않기 때문에 없음을 사용해야 합니다.
그래서 나는.attr('visibility') === "visible"
항목이 숨겨진 항목의 하위 항목인 경우 true(":visible")가 반환되지만 이는 올바르지 않습니다.
하위 항목에 "display: inherit"을 추가하여 수정했습니다.이것으로 해결할 수 있습니다.
<div class="parent">
<div class="child">
</div>
<div>
및 CSS:
.parent{
display: hidden;
}
.child{
display: inherit;
}
이제 상위 항목의 가시성을 변경하여 항목을 효과적으로 켜고 끌 수 있으며 $(element.is(":visible")는 상위 항목의 가시성을 반환합니다.
이것은 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 디스플레이 속성 이상을 사용합니다.또한 요소의 내용 너비와 높이에 따라 다릅니다.따라서 요소의 너비와 높이가 어느 정도인지 확인합니다.이를 위해 디스플레이 속성을 다음과 같이 설정해야 할 수도 있습니다."inline-block"또는"block"
확인하시겠습니까?.is(":visible")사용 후.show()/.hide()?
다음과 같은 또 다른 가능한 이유는.is(":visible")애니메이션을 사용할 때 예상대로 작동하지 않습니다..show("slow")그리고..hide("slow")애니메이션이 완료될 때까지 기다리지 않고 애니메이션이 실제로 요소의 가시성(또는 심지어 높이와 너비) 변경 타이밍에 영향을 줍니다.이런 경우에는 사용하지 마십시오..is(":visible")콜백 기능을 사용하여 요소가 표시되거나 숨겨져 있을 때 필요한 모든 작업을 수행합니다.
$(selector).show("slow", function () {
// Do something when $(selector) is visible
});
$(selector).hide("slow", function () {
// Do something when $(selector) is hidden
});
언급URL : https://stackoverflow.com/questions/8337186/jquery-isvisible-not-working-in-chrome
'programing' 카테고리의 다른 글
| 봄에 현재 HttpServletRequest를 가져오는 정적인 방법이 있습니까? (0) | 2023.07.26 |
|---|---|
| 도커가 도커 파일을 빌드할 때 실행 npm 설치 명령을 캐시하는 방법 (0) | 2023.07.26 |
| 중간 복사본 없이 표준 C에서 memmove를 구현하는 방법은 무엇입니까? (0) | 2023.07.26 |
| Hibernate + Java에서는 성능이 느리지만 동일한 기본 Oracle 쿼리와 함께 TOD를 사용하면 성능이 빠름 (0) | 2023.07.26 |
| 표의 다중 제약 조건:모든 위반을 가져오는 방법? (0) | 2023.07.26 |