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

  }
}

newtxt[i]を表示するためにクリックしたときに各divが必要です。私を困惑させているのは、個々のdivの色が本来のように変化することですが、onclickは最後のdivにのみ影響します。div0またはdiv1をクリックすると、div2の内部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ではありません。

これが#mydivdiv-height：50pxのスタイルの私のhtmlです。幅：200px; border：1px solid black;

 <body>
 <section id='mydiv'>

    <div>
</div>

<div>
</div>

<div>
</div>


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

回答ありがとうございます。私の言い回しが少し混乱している場合は申し訳ありません。tl;dr1つのループを持つdivのセットに個別のonclicksを追加したい

より明確にするために編集*

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 に答える