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").is(':visible') )，并不知道该条件会一直为真，即使该元素不可见。
解决问题
随后，在控制台分别输出了$("#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($("#pwdLogin:visible").length !==0)表达式的判断
参考资料
结束语
至此，问题就已经被解决了。如果还有jQuery判断元素可见性的其他方法，欢迎大家留言补充。