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

8 浏览
0 Comments

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

这个问题已经有了答案:

可能的重复问题:

JavaScript是否不支持带本地变量的闭包？

我想通过一个循环动态地向我的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]。问题在于，颜色会像它们应该那样逐个更改，但是onclick仅影响最后一个div。如果我单击div 0或div 1，它仅更改div2的inner html，而不是每个div。

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; width:200px; border:1px solid black;





谢谢任何答案，如果我的措辞有点令人困惑，请见谅。


tl;dr我想使用1个循环向一组div添加单独的onclick


编辑以获得更多清晰度* 


解决方案通过指定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]};
  }
}




								
admin 更改状态以发布 2023年5月21日
							

							

															

						

						
0

					

				


			


			
			

	

		

			

				1
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
尝试这个




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





http://jsfiddle.net/UAvmx/

									

				

									

			

			
0