1

可能重复：
JavaScript 不支持带有局部变量的闭包吗？

我想用 1 个循环向我的 div 元素动态添加不同的 onclick。这是我的代码的简化版本。

var colors=['blue','green','yellow'];
var newtxt=['box1','box2','box3'];

var i;
function set_element2()
{
var x=document.getElementById('mydiv').getElementsByTagName('div');
  for(i=0;i<x.length;i++)
  {

    var d=x[i];
var col=colors[i];
    var txt=newtxt[i];
d.style.background=col;
d.onclick=function(){d.innerHTML=txt};

  }
}

我希望每个 div 在单击时显示 newtxt[i]。让我难过的是我的 div 的颜色会像它们应该的那样单独变化，但是 onclick 只会影响最后一个 div。如果我单击 div 0 或 div 1 它只会更改 div2 的内部 html，而不是单独更改每个 html。

function wrongway()
{
x[0].onclick=function(){x[0].innerHTML=newtxt[0];};
x[1].onclick=function(){x[1].innerHTML=newtxt[1];};
x[2].onclick=function(){x[2].innerHTML=newtxt[2];};
}

这样做是可行的，但是我需要在一个循环中这样做，所以我不必为每组 div 创建几十个函数，这不是 DRY。

这是我的html，样式为#mydiv div-height:50px; 宽度：200px；边框：1px纯黑色；

 <body>
 <section id='mydiv'>

    <div>
</div>

<div>
</div>

<div>
</div>


 </section>
 <input type='button' onclick='set_element2()'> 
 </body>

感谢您的任何回答，如果我的措辞有点混乱，对不起。tl；博士我想将单独的 onclicks 添加到一组带有 1 个循环的 div

为更清晰而编辑*

通过指定di=i解决方案，并使用此解决方案。

function multOnclicks()
{
var x=document.getElementById('mydiv').getElementsByTagName('div');
for(i=0;i<x.length;i++)
{

  var d=x[i];
  var col=colors[i];
  var txt=newtxt[i];

  d.style.background=col;

  d.i = i;
  d.onclick=function(){this.innerHTML=newtxt[this.i]};

  }
}
4

1 回答 1

0

尝试这个

d.onclick=function(){this.innerHTML=this.style.backgroundColor};

http://jsfiddle.net/UAvmx/

于 2013-01-05T21:10:28.253 回答