gpt4 book ai didi

javascript - 通过一个循环为每个 div 添加不同的 onclick

转载 作者:行者123 更新时间:2023-11-28 09:27:21 25 4
gpt4 key购买 nike

Possible Duplicate:
Doesn’t JavaScript support closures with local variables?

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

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,而不是单独更改每个 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;宽度:200px;边框:1px纯黑;

 <body>
<section id='mydiv'>

<div>
</div>

<div>
</div>

<div>
</div>


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

感谢您的回答,如果我的措辞有点令人困惑,请抱歉。tl;dr 我想将单独的 onclicks 添加到一组具有 1 个循环的 div

为了更加清晰而进行了编辑*

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

}
}

最佳答案

试试这个

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

http://jsfiddle.net/UAvmx/

关于javascript - 通过一个循环为每个 div 添加不同的 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14176309/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com