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>
위의 코드는 Firefox에서 원활하게 실행되지만 Chrome에서는 작동하지 않는 것 같습니다. Chrome에서는 .is(":visible") = false때에도 표시됩니다 true.
다음 jQuery 버전을 사용하고 있습니다 : jquery-1.4.3.min.js
jsFiddle 링크 : http://jsfiddle.net/WJU2r/4/
답변
:visibleChrome의 일부 인라인 요소에서는 jQuery 선택기가 작동하지 않는 것 같습니다 . 해결책은 디스플레이 스타일을 추가 "block"하거나 "inline-block"작동시키는 것입니다.
또한 jQuery는 많은 개발자와는 다르게 보이는 것에 대한 정의가 약간 다릅니다.
요소가 문서에서 공간을 소비하면 표시되는 것으로 간주됩니다.
보이는 요소의 너비 나 높이가 0보다 큽니다.
즉, 요소는 공간을 소비하고 볼 수 있도록 너비와 높이가 0이 아니어야합니다.
배치에서 공간을 여전히 소비하므로 요소가
visibility: hidden있거나opacity: 0표시되는 것으로 간주됩니다.
반면에 불투명도가 0으로 visibility설정되어 hidden있거나 불투명도가 0 인 경우에도 :visible공간을 소비하므로 jQuery에 여전히 영향 을 미치므로 CSS에 가시성이 숨겨져 있다고 명시 적으로 혼동 할 수 있습니다.
문서에없는 요소는 숨겨진 것으로 간주됩니다. jQuery는 해당 스타일에 따라 문서에 추가 될 때 표시되는지 알 수있는 방법이 없습니다.
선택한 상태에 관계없이 모든 옵션 요소는 숨겨진 것으로 간주됩니다.
요소를 숨기는 애니메이션 중에는 요소가 애니메이션이 끝날 때까지 표시되는 것으로 간주됩니다. 애니메이션에서 요소를 표시하는 동안 요소는 애니메이션의 시작 부분에서 볼 수있는 것으로 간주됩니다.
쉽게 볼 수있는 방법은 화면에서 요소를 볼 수 있으면 내용을 볼 수 없거나 투명 등의 이유로 볼 수 있다는 것입니다. 즉, 공간을 차지합니다.
마크 업을 약간 정리하고 표시 스타일을 추가했습니다 ( 예 : 요소 표시를 “block”등으로 설정 ).
jQuery 3부터 정의 :visible가 약간 변경되었습니다.
jQuery를 3 약간의 의미를 수정한다
:visible(그러므로의가
:hidden).
이 버전부터는:visible너비 및 / 또는 높이가 0 인 레이아웃 상자를 포함하여 레이아웃 상자가있는 요소가 고려
됩니다. 예를 들어br내용이없는 요소 및 인라인 요소는:visible선택기에 의해 선택됩니다.
답변
코드가 크롬에서 작동하지 않는 이유를 모르겠지만 몇 가지 해결 방법을 사용하는 것이 좋습니다.
$el.is(':visible') === $el.is(':not(:hidden)');또는
$el.is(':visible') === !$el.is(':hidden'); jQuery가 크롬으로 나쁜 결과를 낳았다 고 확신하는 경우 CSS 규칙 검사를 사용할 수 있습니다.
if($el.css('display') !== 'none') {
// i'm visible
}
또한 이전 버전의 버그가 수정되어 최신 jQuery 를 사용할 수도 있습니다.
답변
요소가 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();
});
답변
동일한 페이지의 다른 위치가 제대로 작동하기 때문에 HTML의 단점과 관련이 있다고 가정합니다.
이 문제를 해결할 수있는 유일한 방법은 다음과 같습니다.
if($('#element_id').css('display') == 'none')
{
// Take element is hidden action
}
else
{
// Take element is visible action
}
답변
jquery 문서를 읽으면 무언가가 보이지 않거나 숨겨져 있지 않은 여러 가지 이유가 있습니다.
CSS 표시 값이 none입니다.
유형이 “hidden”인 양식 요소입니다.
너비와 높이는 명시 적으로 0으로 설정됩니다.
조상 요소가 숨겨져 있으므로 요소가 페이지에 표시되지 않습니다.
http://api.jquery.com/visible-selector/
다음은 하나의 보이는 요소와 하나의 숨겨진 요소가있는 작은 jsfiddle 예제입니다.
답변
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>문안 인사,
페르난도
답변
일반적으로 객체의 부모가 숨겨져있을 때이 상황을 겪습니다. 예를 들어 html이 다음과 같은 경우 :
<div class="div-parent" style="display:none">
<div class="div-child" style="display:block">
</div>
</div>자녀가 다음과 같이 보이는지 묻는 경우 :
$(".div-child").is(":visible");부모가 보이지 않기 때문에 false를 반환하므로 div도 보이지 않습니다.
