首页 文章

检测元素是否可见[重复]

提问于
浏览 次
470

这个问题在这里已有答案：

使用 .fadeIn() 和 .fadeOut() ，我一直在我的页面上隐藏/显示一个元素，但有两个按钮，一个用于隐藏，一个用于显示 . 我现在想要一个按钮来切换两者 . 因此，我的问题是如何检测元素是否可见？

我的HTML原样：

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

我的JS原样是：

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

    function hideTestElement(){
        $('#testElement').fadeOut('fast');
    }
</script>

我希望得到我的HTML：

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

我喜欢我的JS，虽然纯jQuery会很好：

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

任何帮助感激地收到..

javascript jquery

3 回答

  • 716

    您正在寻找：

    .is(':visible')

    虽然您可能应该更改您的选择器以使用jQuery，因为您仍然在其他地方使用它：

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

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

    jQuery 3

    由于它必须遍历DOM树来检查一堆元素，所以 :visible 已经成为一个相当慢的选择器 . 然而，对于jQuery 3来说，这是个好消息，因为this post解释了（Ctrl F代表 :visible ）：

    感谢Paul Irish在谷歌的一些 Sleuth 工作，我们发现了一些情况，当我们在同一个文档中多次使用自定义选择器时，我们可以跳过一堆额外的工作 . 这个特殊情况现在快了17倍！请记住，即使有了这些改进，选择器如：visible和：hidden也可能很昂贵，因为它们依赖于浏览器来确定元素是否实际显示在页面上 . 在最坏的情况下，这可能需要完全重新计算CSS样式和页面布局！虽然我们在大多数情况下不鼓励使用它们，但我们建议您测试页面以确定这些选择器是否会导致性能问题 .

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

    function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}
    回复于
  • 38

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

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

    Here's a demo.

    回复于
  • 25
    if($('#testElement').is(':visible')){
    //what you want to do when is visible
}
    回复于

相关问题