Question

可能重复：
Doesn’t JavaScript support closures with local variables?

我想用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，而不是单独更改每个.h / p>

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;宽度：200像素;边框：1px纯黑色;

 <body>
 <section id='mydiv'>

    <div>
</div>

<div>
</div>

<div>
</div>


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

感谢您的回答，对不起，如果我的措辞有点令人困惑。 tl; dr我想为一组带有1个循环的div添加单独的onclicks

编辑以获得更清晰*

溶液通过指定 d.i = i ，并使用 this 解决问题。

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

  }
}

Answer 1

试试这个

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

http://jsfiddle.net/UAvmx/

使用一个循环为每个div添加不同的onclick

1 个答案: