使用 jQuery 检测元素是否可见

javascript jquery

2022-08-29 23:00:39

使用和，我一直在我的页面上隐藏/显示一个元素，但有两个按钮，一个用于隐藏，一个用于显示。我现在想要一个按钮来切换两者。.fadeIn().fadeOut()

我的HTML / JavaScript，因为它是：

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>

function showTestElement() {
  $('#testElement').fadeIn('fast');
}

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}

我的HTML / JavaScript，因为我想拥有它：

<a onclick="toggleTestElement()">Show/Hide</a>

function toggleTestElement() {
  if (document.getElementById('testElement').***IS_VISIBLE***) {
    $('#testElement').fadeOut('fast');
  } else {
    $('#testElement').fadeIn('fast');
  }
}

如何检测元素是否可见？

答案 1

您正在寻找：

.is(':visible')

尽管考虑到您在其他地方使用它，您可能应该将选择器更改为使用jQuery：

if($('#testElement').is(':visible')) {
    // Code
}

重要的是要注意，如果目标元素的任何一个父元素被隐藏，那么子元素将返回（这是有道理的）。.is(':visible')false

jQuery 3

:visible以选择器速度相当慢而闻名，因为它必须沿着DOM树向上遍历检查一堆元素。然而，对于jQuery 3来说，有个好消息，正如这篇文章所解释的那样（ + for）：CtrlF:visible

多亏了Paul Irish在Google的一些侦探工作，我们发现了一些情况，当自定义选择器（如：visible）在同一文档中多次使用时，我们可以跳过一堆额外的工作。这种特殊情况现在快了17倍！

请记住，即使进行了此改进，像：visible 和：hidden 这样的选择器也可能很昂贵，因为它们依赖于浏览器来确定元素是否实际显示在页面上。在最坏的情况下，这可能需要完全重新计算CSS样式和页面布局！虽然在大多数情况下，我们不鼓励使用它们，但我们建议您测试您的网页，以确定这些选择器是否会导致性能问题。

进一步扩展到您的特定用例，有一个名为$.fadeToggle（）的内置jQuery函数：

function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}

答案 2

没有必要，只需在元素上使用：fadeToggle()

$('#testElement').fadeToggle('fast');

下面是一个演示。