基于闭包实现的显示与隐藏
Posted chenmm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于闭包实现的显示与隐藏相关的知识，希望对你有一定的参考价值。
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>
运行结果：
以上是关于基于闭包实现的显示与隐藏的主要内容，如果未能解决你的问题，请参考以下文章