基于闭包实现的显示与隐藏

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div class="binds">
 9             <div class="phonebind">
10                 <h3>手机绑定</h3>
11                 <p>当前手机号码:<span id="oldPhone">12345678</span>
12                 <input type="button" class="btnInput" id="rehindPhone" value="重新绑定" />
13                 </p>
14                 <div class="updatetelwrap hidden">
15                     <div class="newphonewrap">
16                         <label>新手机号码<em>*</em></label>
17                         <input type="text" class="formatText" id="newPhone" />
18                     </div>
19                     <div class="identifywrap">
20                         <label>短信验证码<em>*</em></label>
21                         <input type="text" class="inputcode" />
22                         <p><input type="button" value="获取短信验证码" class="bindbtn" 
23                             id="newphonebind" style="float: left;" onclick="javascript:bindPhone();" />    </p>
24                         
25                     </div>
26                 </div>
27             </div>
28         </div>
29         <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
30         <script>
31             $(function(){
32                 $(document).on("click",'#rehindPhone',bindInputclick());
33             });
34             function bindInputclick(){
35                 var i=2;
36                 return function(){
37                     if(i%2==0){
38                         $(this).parent().next().slideDown();
39                     }
40                     else{
41                         $(this).parent().next().slideUp();
42                     }
43                     i++;
44                 }
45             }
46         </script>
47         
48     </body>
49 </html>
运行结果：
基于闭包实现的显示与隐藏

猜你喜欢
