:visible选择器使用过程中所遇到的问题

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

3种登录方式点击切换时，会隐藏其他的登录模块。
在密码登录和手机验证登录两种登录类型中，都存在一个登录按钮。【如下图所示】

要实现的功能：按下回车（Enter键）登录。

思路：在按下回车登录时，需要判断此时选择了哪一种登录方式，然后才能进行登录。即需要判断当前哪一个登录模块可见，并调用相应登录按钮的点击事件。

主要的功能点：如何判断某个元素是否可见。 于是，就使用了 jQuery :visible 选择器。

代码如下：

$(document).bind('keydown',function(e){
    if (e.keyCode == "13") {//keyCode=13是回车键
        if($("#pwdLogin:visible")){//如果是密码登录
            $("#accountSubmit").click();
        }else if($("#msgLogin:visible")){//如果是短信验证码登录
            $("#messageSubmit").click();
        }
    }
});

发现问题

经过调试发现： if-else条件判断语句始终只会进入if语句，而else语句永远进不去。

疑问：为什么呢？
原因：如果找不到任何相应的匹配，则返回了一个空的 jQuery对象。如下图所示

在这里插入图片描述

我最初想的是：如果该元素可见就调用它对应登录按钮的点击事件。于是就直接这样写了if ( $("#pwdLogin:visible") )，并不知道该条件会一直为真，即使该元素不可见。

在这里插入图片描述

扫描二维码关注公众号，回复： 3695130 查看本文章

解决问题

随后，在控制台分别输出了$("#pwdLogin:visible")和$("#msgLogin:visible")。想知道一直执行if( $("#pwdLogin:visible") )这个条件的具体原因是什么。【具体如下图所示】

在这里插入图片描述

看了输出结果，才发现我的写法有问题。像我这种写法，if语句的条件始终为真，就不可能进入else语句。

所以，如果你要判断该元素是否可见，应该这么写：if( $("#pwdLogin:visible").length !==0 ){ }
而不是这样写：if( $("#pwdLogin:visible") ){ }

如下图所示：
在这里插入图片描述

因此，应该这样写：

//注：长度不为0说明该元素可见，而不能直接通过:visible判断
$(document).bind('keydown',function(e){
    if (e.keyCode == "13") {//keyCode=13是回车键
        if($("#pwdLogin:visible").length !==0){//如果是密码登录
            $("#accountSubmit").click();
        }else if($("#msgLogin:visible").length !==0){//如果是短信验证码登录
            $("#messageSubmit").click();
        }
    }
});

方法拓展

首先，让我们学习一下Jquery 选择器 :visible的定义和用法。

定义

:visible选择器选取每个当前是可见的元素。即匹配所有的可见元素。

除以下几种情况之外的元素就是可见元素：

设置为 display:none
type="hidden" 的表单元素
width 和 height 设置为 0
隐藏的父元素（同时隐藏所有子元素）

注意：

在 jQuery 中，visibility: hidden; 和 opacity: 0; 都被视作可见的，因为它们在页面上占据了相应的物理空间。

用法

$("ele:visible")

后来经过百度，得到了jQuery判断元素可见性的其他方法：

if($(ele).is(":visible")) 显示：返回 true；隐藏：返回 false
if($(ele).css('display') == 'none') 表达式的判断
if($("#ele:visible").length !==0) 表达式的判断

参考资料

结束语

至此，问题就已经被解决了。如果还有jQuery判断元素可见性的其他方法，欢迎大家留言补充。