如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
当前回答
这些答案都没有涉及我所理解的问题, 也就是我正在寻找的问题, “我如何处理有可见度的项目:隐藏的?” 。 无论是: 可见的还是: 隐藏的, 都无法处理, 因为两者都在寻找文档中的显示。 据我所知, 没有选择器可以处理 cs 可见度。 这就是我是如何解决这个问题的( 标准拼写选择器, 可能有更压缩的语法 ) :
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
其他回答
通常当检查某物是否可见时, 您会立即直接去做其他事情。 jquery 绑链很容易做到 。
所以,如果您有一个选择器, 并且您想要在它上执行某些动作, 只有当它为可见或隐藏时, 您可以使用过滤器 (“ : 可见 ” ) 或过滤器 (“ 隐藏 ” ) , 然后将它与您想要采取的行动连接起来 。
而不是这样声明:
if ($('#btnUpdate').is(":visible"))
{
$('#btnUpdate').animate({ width: "toggle" }); // Hide button
}
或效率更高,但更丑陋:
var button = $('#btnUpdate');
if (button.is(":visible"))
{
button.animate({ width: "toggle" }); // Hide button
}
您可以在一条线内完成全部任务:
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
api 文档: 可见选择器
if($(element).is(":visible")) {
console.log('element is visible');
} else {
console.log('element is not visible');
}
您也可以使用普通的笔记本进行此项操作 :
function isRendered(domObj) {
if ((domObj.nodeType != 1) || (domObj == document.body)) {
return true;
}
if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
return isRendered(domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle(domObj, null);
if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
return isRendered(domObj.parentNode);
}
}
return false;
}
注:
各地工作 , 嵌套元素为 css 工作, 内嵌样式不需要框架 。
if($("h1").is(":hidden")){
// your code..
}