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

Question

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用错了，试试看行不？

Answer 1

这样写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);
}只有把变化的参数传入函数中，才能被固定下来

Answer 2

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);
}