不封装函数，直接把登陆给复制过去，怎么没有效果了？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹出层</title>
<link rel="stylesheet" href="tanchu.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="tanchu.js"></script>
</head>
<body>
<div class="box">
<div class="top">
<a id="loginLink" href="#">登陆</a>
<a id="loginSign" href="#">注册</a>
</div>
</div>
<!-- 弹出层遮罩（登陆） -->
<div id="layer-mask" class="layer-mask"></div>
<!-- 弹出层窗口 -->
<div id="layer-pop" class="layer-pop">
<!-- 弹出层关闭按钮 -->
<div class="layer-close">✘</div>
<!-- 弹出层内容区 -->
<div class="layer-content">
<!--登录窗体--> 
<div class="login">
<h4 class="title">登录</h4>
<div class="item">
<label for="username">账号</label>
<input type="text" id="username" name="username">
</div>
<div class="item">
<label for="password">密码</label>
<input type="password" id="password" name="password">
</div>
<div class="item">
<input type="submit" id="loginSubmitBtn" class="submit" value="填写好了">
</div>
</div>
</div>
</div>
 
<!-- 弹出层遮罩（注册） -->
<div id="layer-mask2" class="layer-mask2"></div>
<!-- 弹出层窗口 -->
<div id="layer-pop2" class="layer-pop2">
<!-- 弹出层关闭按钮 -->
<div class="layer-close">✘</div>
<!-- 弹出层内容区 -->
<div class="layer-content">
<!--登录窗体--> 
<div class="login">
<h4 class="title">注册</h4>
<div class="item">
<label for="username">账号</label>
<input type="text" id="username" name="username">
</div>
<div class="item">
<label for="password">密码</label>
<input type="password" id="password" name="password">
</div>
<div class="item">
<label for="password">重复密码</label>
<input type="password" id="password" name="password">
</div>
<div class="item">
<input type="submit" id="loginSubmitBtn" class="submit" value="填写好了">
</div>
</div>
</div>
</div>
 
 
</body>
</html>

(function(){
    // 为登陆绑定事件
    $("#loginLink").click(function(){//为ID为loginLink的对象添加单击事件
        $("#layer-mask").show();//弹出遮罩层
        $("#layer-pop").show();//弹出弹出窗口
    });
    $(".layer-close").click(function(){//为关闭按钮添加事件，点击隐藏遮罩层/弹出层
        $("#layer-mask").hide();
        $("#layer-pop").hide();
    })
 
        // 为注册绑定事件
        $("#loginSign").click(function(){//为ID为loginSign的对象添加单击事件
        $("#layer-mask2").show();//弹出遮罩层
        $("#layer-pop2").show();//弹出弹出窗口
    });
    $(".layer-close").click(function(){//为关闭按钮添加事件，点击隐藏遮罩层/弹出层
        $("#layer-mask2").hide();
        $("#layer-pop2").hide();
    })
 
 
 
 
})

.box{background: url(5566.png);width:100%;height:1800px;}
.top{width:80%;height:100px;margin:0 auto;background: #e1f2f6;
            line-height: 100px;text-align: center;}
a{text-decoration:none;}
/*弹出层遮罩*/
.layer-mask{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: black;
    z-index:1;
    opacity:0.5;
}
/*弹出层窗口*/
.layer-pop{
    display:none;
    position:fixed;
    z-index:2;
    /*设置始终居中显示*/
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
 
 
width:400px;
height:300px;
background: white;
 
}
/*弹出层关闭按钮*/
.layer-close{
    float:right;
    width:24px;
    height:24px;
    border:3px solid #ddd;
    border-radius:50%;
    text-align:center;
    line-height: 24px;
    background: #eee;
 
    margin-top: -12px;
    margin-right: -12px;
}
.layer-close:hover{
    cursor:pointer;
    background: #ccc;
    color:white;
}
/*弹出层内容区*/
.layer-content{padding-left: 30px;}

我自己仿照老师写的，登陆弹出关闭都没有问题；不封装函数的话，按照思路，可以直接把登陆的代码重新copy一份；之后按照js的代码重新更改对应事件的ID名称即可；在注册那里我重新增加了一个重复密码div；同时修改了对应事件相关的ID名称；在后面加了个2做标记；但是效果却没有实现了？

夜幕客船 2017-12-02

源自：jQuery弹出层案例 3-1 弹出层通用函数封装（上）

收起

3回答

小丸子爱吃菜回答被采纳获得+3积分 2017-12-04 09:37:59

看到了你的回复，不知道你的问题是否已经解决？

针对你提出的封装和调用比较抽象的问题，这里涉及到比较深入的JS的内容，这块内容是会在后面比较高级的路径中去讲解，这里只是拓展，大家可以尽量去理解，当然也可以使用自己觉得目前比较好理解的方式去写。

实现代码的方式有很多种，我们鼓励大家多尝试多练习~

收起回答

夜幕客船提问者 #1

非常感谢！

2017-12-04 18:08:48
夜幕客船提问者 #2

恩已经解决了，但是采用的是比较笨的办法；关于函数封装、传参、重新调用这块希望有专题课程；简单的函数封装调用还勉强能够理解；到了这里，登陆/注册已经完全理解不了！

2017-12-04 18:11:59
小丸子爱吃菜回复提问者夜幕客船 #3

http://class.imooc.com/sc/35《进击JavaScript核心》这个路径是JS深入讲解的路径，如果想深入学习函数。面向对象等内容，可以考虑该路径。

2017-12-04 18:19:58

提问者夜幕客船 2017-12-03 22:39:22

关于登陆/注册按钮弹出事件的说明：登陆注册两个效果没啥区别，采用封装函数复用毫无疑问是最好的方法，无奈函数封装没看明白；那就按照笨的办法和思路来解决；首先按照老师的思路设置好登陆的弹出事件；之后复制一份登陆的HTML代码；根据js事件的属性值修改相应的ID和class；修改完对应的js后，因为ID和class的重新设置；所以此时需要同步设置注册部分的CSS！！！同步修改完CSS和js，效果便就能实现了！

收起回答

小丸子爱吃菜 2017-12-03 11:46:35

封装的函数写的不对，在你封装的函数中，去打印值，是没有反应的。

你自己可以在这个位置测试一下代码，看看是什么效果。

建议你前期还是参照老师的代码和思路去写，老师的代码弄的差不多了，可以自己去延伸学习，这样掌握知识会比较稳定和扎实。

祝学习愉快！

收起回答

提问者夜幕客船 #1

js最前面那里少个$符号，$(function(){ // 为登陆绑定事件 $("#loginLink").click(function(){//为ID为loginLink的对象添加单击事件 $("#layer-mask").show();//弹出遮罩层 $("#layer-pop").show();//弹出弹出窗口 }); $(".layer-close").click(function(){//为关闭按钮添加事件，点击隐藏遮罩层/弹出层 $("#layer-mask").hide(); $("#layer-pop").hide(); }) 登陆是ok的；我也想按照老师的思路，但是老师在讲函数封装和调用这里太抽象了，并且没有着重分析，感觉老师们从js开始，讲课不知道是因为时间限定还是什么原因，讲的都很生硬并且缺少重要的思路分析，看了2遍都没有理解函数封装这块！

2017-12-03 13:55:25