Saa*_*hir 204 jquery google-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>
上面的代码在Firefox中运行顺畅,但在Chrome中似乎不起作用.在Chrome中它.is(":visible") = false甚至可以显示true.
我正在使用以下jQuery版本:jquery-1.4.3.min.js
jsFiddle链接:http://jsfiddle.net/WJU2r/4/
ade*_*neo 269
似乎jQuery的:visible选择器不适用于Chrome中的某些内联元素.解决方案是添加显示样式,"block"或者"inline-block"使其工作.
另请注意,与许多开发人员相比,jQuery对可见内容的定义有所不同
如果元素占用文档中的空间,则认为元素是可见的.
可见元素的宽度或高度大于零.
换句话说,元素必须具有非零的宽度和高度以消耗空间并且是可见的.
具有
visibility: hidden或被opacity: 0认为可见的元素,因为它们仍然占用布局中的空间.
另一方面,即使它visibility被设置为hidden或不透明度为零,它仍然:visible是jQuery,因为它占用空间,当CSS明确表示其可见性被隐藏时,这可能会令人困惑.
不在文档中的元素被视为隐藏; jQuery没有办法知道它们在附加到文档时是否可见,因为它取决于适用的样式.
无论选择的状态如何,所有选项元素都被视为隐藏.
在隐藏元素的动画期间,该元素在动画结束前被视为可见.在显示元素的动画期间,该元素在动画开始时被视为可见.
看待它的简单方法是,如果您可以在屏幕上看到元素,即使您看不到它的内容,它也是透明的等等,它是可见的,即占用空间.
我稍微清理了你的标记并添加了一种显示样式(即将元素显示设置为"阻止"等),这对我有用:
从jQuery 3开始,定义:visible略有改变
jQuery 3稍微修改了
:visible(因此:hidden)的含义.
从此版本开始,:visible如果元素具有任何布局框,则将考虑元素 ,包括零宽度和/或高度的布局框.例如,选择器br将选择没有内容的元素和内联元素:visible.
gio*_*_13 63
我不知道为什么你的代码不能用于chrome,但我建议你使用一些解决方法:
$el.is(':visible') === $el.is(':not(:hidden)');
要么
$el.is(':visible') === !$el.is(':hidden');
如果你确定jQuery在chrome中给你一些不好的结果,你可以依靠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.
它们是type ="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>
问候,
费尔南多
确定元素是否可见的跨浏览器/版本解决方案是在显示/隐藏时向元素添加/删除 css 类。元素的默认（可见）状态可能如下所示：
<span id="span1" class="visible">Span text</span>
然后在隐藏时删除该类：
$("#span1").removeClass("visible").hide();
在显示时，再次添加：
$("#span1").addClass("visible").show();
然后要确定元素是否可见，请使用以下命令：
if ($("#span1").hasClass("visible")) { // do something }
这也解决了在大量使用“:visible”选择器时可能发生的性能影响，jQuery 文档中指出了这一点：
大量使用此选择器可能会对性能产生影响，因为它可能会迫使浏览器在确定可见性之前重新呈现页面。通过其他方法（例如使用类）跟踪元素的可见性可以提供更好的性能。
“:visible”选择器的官方 jQuery API 文档
| 归档时间： |
|
| 查看次数： |
530842 次 |
| 最近记录： |