例えば、こういうパターン。
for(var i=0; i<10; i++) {
var link = document.createElement("a");
var url = "xxxxxxxx?id=" + i;
var onclickEvent = function() {
location.href = url;
return false;
}
link.onclick = onclickEvent;
link.setAttribute("href", "javascript:void(0)");
link.appendChild(document.createTextNode("URLその" + i));
}
for文でiを+1ずつしたリンクを10個作成している。
ように見える。
が、リンクをクリックしてみるとIDは常に9なのである。
リンクをクリックしたときにはfor文回り終わってるんだから当たり前である。
う~む、これはいけてない・・・
という訳で、調べてみたら素晴らしい解決法を発見。
var onclickEvent = (function(num) {
return function() {
location.href = url + "&id=" + num;
return false;
}
})(i);
どうやら(i)がミソらしい。
これがあることによって、function(num)のオブジェクトを
即時に作ってくれるのだそうで。
う゛~~~~ん。奥が深いな、Javascript!
for(var i=0; i<10; i++) {
var link = document.createElement("a");
var url = "xxxxxxxx?id=" + i;
var onclickEvent = function() {
location.href = url;
return false;
}
link.onclick = onclickEvent;
link.setAttribute("href", "javascript:void(0)");
link.appendChild(document.createTextNode("URLその" + i));
}
for文でiを+1ずつしたリンクを10個作成している。
ように見える。
が、リンクをクリックしてみるとIDは常に9なのである。
リンクをクリックしたときにはfor文回り終わってるんだから当たり前である。
う~む、これはいけてない・・・
という訳で、調べてみたら素晴らしい解決法を発見。
var onclickEvent = (function(num) {
return function() {
location.href = url + "&id=" + num;
return false;
}
})(i);
どうやら(i)がミソらしい。
これがあることによって、function(num)のオブジェクトを
即時に作ってくれるのだそうで。
う゛~~~~ん。奥が深いな、Javascript!