使用jQuery检测元素是否可见 [英] Detect if an element is visible with jQuery

问题描述

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

Using .fadeIn() and .fadeOut(), I have been hiding/showing an element on my page, but with two buttons, one for hide and one for show. I now want to have one button to toggle both.

我的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');
  }
}

如何检测元素是否可见?

How do I detect if the element is visible or not?

推荐答案

您在寻找:

.is(':visible')

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

Although you should probably change your selector to use jQuery considering you're using it in other places anyway:

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

请务必注意，如果目标元素的父元素中的任何一个被隐藏，则子元素上的.is(':visible')将返回false(这很有意义).

It is important to note that if any one of a target element's parent elements are hidden, then .is(':visible') on the child will return false (which makes sense).

:visible以选择器相当慢而闻名，因为它必须遍历DOM树来检查一堆元素.但是，对于jQuery 3来说有个好消息，如

:visible has had a reputation for being quite a slow selector as it has to traverse up the DOM tree inspecting a bunch of elements. There's good news for jQuery 3, however, as this post explains (Ctrl + F for :visible):

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

Thanks to some detective work by Paul Irish at Google, we identified some cases where we could skip a bunch of extra work when custom selectors like :visible are used many times in the same document. That particular case is up to 17 times faster now!

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

Keep in mind that even with this improvement, selectors like :visible and :hidden can be expensive because they depend on the browser to determine whether elements are actually displaying on the page. That may require, in the worst case, a complete recalculation of CSS styles and page layout! While we don’t discourage their use in most cases, we recommend testing your pages to determine if these selectors are causing performance issues.

---

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

---

Expanding even further to your specific use case, there is a built in jQuery function called $.fadeToggle():

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

这篇关于使用jQuery检测元素是否可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！