如何使元素的可见度.hide(), .show(),或.toggle()?
如果一个元素是visible或hidden?
当前回答
$(document).ready(function() {
var visible = $('#tElement').is(':visible');
if(visible) {
alert("visible");
// Code
}
else
{
alert("hidden");
}
});<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<input type="text" id="tElement" style="display:block;">Firstname</input>其他回答
有很多方法可以检查元素是否可见或隐藏在 jQuery 中。
Demo HTML 例如引用
<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>
使用可见性过滤过滤器选择器$('element:hidden')或$('element:visible')
$('element:hidden'):选择隐藏的所有元素。Example: $('#content2:hidden').show();$('element:visible'):选择可见的所有元素。Example: $('#content:visible').css('color', '#EEE');
更多信息http://api.jquery.com/category/selectors/visibility-filter-selectors/
使用使用is()过滤过滤
Example:
$('#content').is(":visible").css('color', '#EEE');
Or checking condition
if ($('#content').is(":visible")) {
// Perform action
}
通常当检查某物是否可见时, 您会立即直接去做其他事情。 jQuery 链条让事情变得容易。
所以,如果您有一个选择器, 并且只有显示或隐藏时才想要对它执行某些动作, 您可以使用filter(":visible")或filter(":hidden")然后用您想要采取的行动链绑住它。
所以,而不是一个if语句, 像这样的语句 :
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" });
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// 'element' is hidden
}
上述方法不考虑父母亲的可见度。为了也考虑父母的可见度,您应该使用.is(":hidden")或.is(":visible").
例如,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
上述方法将考虑
div2可见时可见:visible。但是,在很多情况下,特别是当您需要找到隐藏的父(母)是否发现任何错误时,上述情况也许有用,因为在这种情况下,隐藏的母(母)之间是否有错误。:visible不会工作。
expect($("#message_div").css("display")).toBe("none");
