我写了一个小插件,遇到一个问题,语言我也不知道怎么描述,就做了一个简单的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>
自己解决了,代码变一变。虽然解决了,但还有有点不懂其中的原因。