我写了一个小插件,遇到一个问题,语言我也不知道怎么描述,就做了一个简单的demo,可以直接创建一个html页面运行一下就知道了,点在每个按钮的下面附加一个标签,然后赋值,点击按钮的时候 去读下面的那个值。现在,我在页面上,弄了两个按钮,可是点击按钮的时候,永远只取到最后一个按钮的下标签的值。我查过,这个变量obj1在第二次使用的时候 就变成了最后一个标签的对象。谁能帮我看看。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <!-- <script src="Datepicker.js" type="text/javascript"></script> <link rel="stylesheet" href="Datepicker.css" />--> </head> <body> <input type="button" id="state" value="state" /> <input type="button" id="end" value="end"/> </body> <script type="text/javascript"> demo = (function (doc) { var obj, obj1; function show() { obj.onclick = function () { alert(obj1.innerHTML); }; } function creat() { var div = document.createElement("div"); div.id = obj.id + "div"; div.innerHTML = obj.value; obj.parentNode.insertBefore(div, obj.nextSibling); } return function (e) { obj = document.getElementById(e); creat(); obj1 = document.getElementById(e + "div"); show(); } })(this.document); demo("state"); demo("end"); </script> </html>
要么申明成局部变量,要么用时清空值。
我这样声明obj和obj1不是局部变量么?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <input type="button" id="state" value="state" /> <input type="button" id="end" value="end"/> </body> <script type="text/javascript"> var demo = function (e) { var obj = document.getElementById(e); creat(); var obj1 = document.getElementById(e + "div"); show(); function show() { obj.onclick = function () { alert(obj1.innerHTML); }; } function creat() { var div = document.createElement("div"); div.id = obj.id + "div"; div.innerHTML = obj.value; obj.parentNode.insertBefore(div, obj.nextSibling); } }; var a = new demo("state"); var b = new demo("end"); </script> </html>
自己解决了,代码变一变。虽然解决了,但还有有点不懂其中的原因。