求助：JS闭包问题，循环添加事件，只有最后一个添加成功

[wenxin0205]

百度了一下午 实在是解决不了了。。求大神！
JS实现把DIV中字体展开 收起的效果，循环给RIGHT_DIV进行修改，先判断长度进行截取，这块没问题，之后给该DIV增加点击事件，总是最后一个成功 其他不行。
代码如下，

//判断截取
var o = document.getElementsByName("right_div");
for ( var i = 0; i <= o.length; i++) {
var s = o[i].innerHTML;
var p = document.createElement("span");
var n = document.createElement("a");
if (s.length > 30) {
p.innerHTML = s.substring(0, 30);
n.innerHTML = "...展开";
o[i].appendChild(p);
o[i].appendChild(n);
} else {
p.innerHTML = s;
n.innerHTML = "";
o[i].appendChild(p);
o[i].appendChild(n);
}
//添加事件
this.onclick = function() {
if (n.innerHTML == "...展开") {
n.innerHTML = "收起";
p.innerHTML = s;
} else if(n.innerHTML == "收起"){
n.innerHTML = "...展开";
p.innerHTML = s.substring(0, 30);
}
}
}

[留校_察看]

var o = document.getElementsByName("right_div");
for (var i = 0; i <= o.length; i++) {
	var s = o[i].innerHTML;
	var p = document.createElement("span");
	var n = document.createElement("a");
	if (s.length > 30) {
		p.innerHTML = s.substring(0, 30);
		n.innerHTML = "...展开";
		o[i].appendChild(p);
		o[i].appendChild(n);
	} else {
		p.innerHTML = s;
		n.innerHTML = "";
		o[i].appendChild(p);
		o[i].appendChild(n);
	}
	//添加事件，首先要确定是向哪个DOM添加事情
	 (function(){
	 	var l = i;
		xxxxx[l].onclick = function() {//其中xxxxx就是要点击的元素
			if (n.innerHTML == "...展开") {
				n.innerHTML = "收起";
				p.innerHTML = s;
			} else if (n.innerHTML == "收起") {
				n.innerHTML = "...展开";
				p.innerHTML = s.substring(0, 30);
			}
		}
	})();
}

你的this用错了，试试看行不？

[wenxin0205]

引用 楼主 wenxin0205 的回复:

百度了一下午 实在是解决不了了。。求大神！ JS实现把DIV中字体展开 收起的效果，循环给RIGHT_DIV进行修改，先判断长度进行截取，这块没问题，之后给该DIV增加点击事件，总是最后一个成功 其他不行。 代码如下， //判断截取 var o = document.getElementsByName("right_div"); for ( var i = 0; i <= o.length; i++) { var s = o[i].innerHTML; var p = document.createElement("span"); var n = document.createElement("a"); if (s.length > 30) { p.innerHTML = s.substring(0, 30); n.innerHTML = "...展开"; o[i].appendChild(p); o[i].appendChild(n); } else { p.innerHTML = s; n.innerHTML = ""; o[i].appendChild(p); o[i].appendChild(n); } //添加事件 this.onclick = function() { if (n.innerHTML == "...展开") { n.innerHTML = "收起"; p.innerHTML = s; } else if(n.innerHTML == "收起"){ n.innerHTML = "...展开"; p.innerHTML = s.substring(0, 30); } } }

不行 还是那样~

[xuzuning]

这样写

var o = document.getElementsByName("right_div");

for ( var i = 0; i < o.length; i++) {
  var s = o[i].innerHTML;
  var p = document.createElement("span");
  var n = document.createElement("a");
;
  if (s.length > 30) {
    p.innerHTML = s.substring(0, 30);
    n.innerHTML = "...展开"; 
    o[i].appendChild(p);
    o[i].appendChild(n);
  } else {
    p.innerHTML = s;
    n.innerHTML = "";
    o[i].appendChild(p);
    o[i].appendChild(n);
  } 
  //添加事件
  (function(i, n, p, s) {
    o[i].onclick = function() {
      if (n.innerHTML == "...展开") {
        n.innerHTML = "收起";
        p.innerHTML = s;
      } else if(n.innerHTML == "收起"){
        n.innerHTML = "...展开";
        p.innerHTML = s.substring(0, 30);
      }
    }
  })(i, n, p, s);
}

只有把变化的参数传入函数中，才能被固定下来

[cb1156]

var o = document.getElementsByName("right_div");
for ( var i = 0; i <= o.length; i++) {
(function(i){
var s = o[i].innerHTML;
var p = document.createElement("span");
var n = document.createElement("a");
if (s.length > 30) {
p.innerHTML = s.substring(0, 30);
n.innerHTML = "...展开"; 
o[i].appendChild(p);
o[i].appendChild(n);
} else {
p.innerHTML = s;
n.innerHTML = "";
o[i].appendChild(p);
o[i].appendChild(n);
} 
//添加事件 
o[i].onclick = function() {
if (n.innerHTML == "...展开") {
n.innerHTML = "收起";
p.innerHTML = s;
} else if(n.innerHTML == "收起"){
n.innerHTML = "...展开";
p.innerHTML = s.substring(0, 30);
}
} })(i);
}

[woshilianglin]

我觉得4L的答案是差不多是最好的了，只怕楼主看不懂啊。