闭包常见的问题就是在无形之中几个闭包共享同样的变量，导致结果与预期不符。
HTML代码：
<!Doctype html> <html> <head> <meta charset=utf-8 /> <title>closure test</title> <style> .hidden{ display: none; } .visible{ display: block; } </style> </head> <body> <ul id="menu"> <li> <h3>文章管理</h3> <dl class="hidden"> <a href="#"><dd>添加文章</dd></a> <a href="#"><dd>文章列表</dd></a> </dl> </li> <li> <h3>教师管理</h3> <dl class="hidden"> <a href="#"><dd>添加教师</dd></a> <a href="#"><dd>教师列表</dd></a> </dl> </li> </ul> </body> </html>
当使用以下js代码添加事件时发现与预期结果（点击标题时不显示隐藏的内容）不符：
<script type="text/javascript"> window.onload=function(){ var menu = document.getElementById("menu"); var element = menu.getElementsByTagName("h3"); for(var i=0;i<element.length;i++){ element[i].onclick=function(){ var dl=element[temp].parentNode.childNodes[3]; if (dl.className == "hidden") { dl.className = "visible"; } else if (dl.className == "visible") { dl.className = "hidden"; } } } }
遇到这类问题的解决方案为：
（1）使用this
（2）使用匿名函数
（3）使用函数调用
- 使用this
<script type="text/javascript"> window.onload = function() { var menu = document.getElementById("menu"); var element = menu.getElementsByTagName("h3"); for (var i = 0; i < element.length; i++) { element[i].onclick=function(){ var dl=this.parentNode.childNodes[3]; if (dl.className == "hidden") { dl.className = "visible"; } else if (dl.className == "visible") { dl.className = "hidden"; } } } } </script>
2.使用匿名函数
</style>
<script type="text/javascript">
window.onload = function() {
var menu = document.getElementById("menu");
var element = menu.getElementsByTagName("h3");
for (var i = 0; i < element.length; i++) {
(function(){
var temp=i;
var dl=element[temp].parentNode.childNodes[3];
element[temp].onclick = function() {
if (dl.className == "hidden") {
dl.className = "visible";
} else if (dl.className == "visible") {
dl.className = "hidden";
}
}
})()
}
}
3.使用函数调用
<script type="text/javascript"> window.onload = function() { var menu = document.getElementById("menu"); var element = menu.getElementsByTagName("h3"); for (var i = 0; i < element.length; i++) { var dl=element[i].parentNode.childNodes[3]; Add(element[i],dl); } function Add(elem,dl){ elem.onclick=function(){ if (dl.className == "hidden") { dl.className = "visible"; } else if (dl.className == "visible") { dl.className = "hidden"; } } } }
总的来说,解决闭包问题的核心是保存要使用的值，避免发生变量的共享。