使用jQuery检测元素是否可见

IT技术 javascript jquery
2021-02-03 05:02:46

使用.fadeIn()and .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');
  }
}

如何检测元素是否可见？

3个回答

您正在寻找：

.is(':visible')

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

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

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

jQuery 3

:visible由于它必须遍历 DOM 树来检查一堆元素，因此它的选择器速度非常慢，因此享有盛誉。然而，jQuery 3 有个好消息，正如这篇文章所解释的（Ctrl+ Ffor :visible）：

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

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

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

function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}
您是否知道如果父项不可见，这是否有效，因为从技术上讲，如果父项不可见，则元素不可见。
2021-03-16 05:02:46
@vsync 与其抱怨，不如发布一个支持 IE7 及更高版本的 vanilla JavaScript 解决方案。它比发布尖刻（尽管正确）的评论更有帮助
2021-03-17 05:02:46
为什么 jQuery 为什么 :( 如果您有数百个元素要检查每个滚动事件，那么这在性能方面不是很明智……直接的 JS 方法会更好。
2021-03-20 05:02:46
您可以使用此属性在元素可见时立即调用函数吗？
2021-03-22 05:02:46
@Felipe 根据thise page ...如果浏览器报告的 offsetWidth 或 offsetHeight 大于 0 ，则元素可见。这个 JSBin表明，如果父母是隐藏的，那么它的孩子也是
2021-04-01 05:02:46

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

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

这是一个演示。

这是那些棘手的答案之一，问题显然是问一件事，但特别是 OP 的最佳方法是另一件事。
2021-03-23 05:02:46 
if($('#testElement').is(':visible')){
    //what you want to do when is visible
}
其它你可能感兴趣的问题
上一篇Play 2.x：如何使用通用按钮发出 AJAX 请求 下一篇在 for-of 循​​环中访问 ES6 数组元素索引