JavaScriptのイベントの付加で悩んでいます

質問

すいません、分からないので教えてください。IEの場合です。

var Test = function() {};
Test.prototype = {
　　a_method: function() {
　　　　var self = this;
　　　　for (var i=1; i<=10; i++) {
　　　　　　$('nantoka' + i).attachEvent('onclick', function(event) { self.b_method(i); });
　　　　}
　　},
　　b_method: function(i) {
　　　　alert(i);
　　}
};

例えば上のようなコードがあり、bodyの中には<img id="nantoka1" />のようなimgタグがnantoka1からnantoka10まであるとします。

この状態でnantoka1～nantoka10をクリックすると、それぞれに対応した画像の番号(1～10)を表示したいのですが、上に示したコードだと、どれをクリックしても番号が10になってしまいます。

イベントの設定が上手くいってないのは自分でも分かるのですが、具体的にどう書けばいいのかわかりません。アドバイスお願いします。
_(._.)_

回答No.2

noname#30818 · ベストアンサー

＞bodyの中には<img id="nantoka1" />のようなimgタグがnantoka1からnantoka10まであるとします。
＞この状態でnantoka1～nantoka10をクリックすると、それぞれに対応した画像の番号(1～10)を表示したいのですが

このように仰っていますのでb_methodでイベントの発生元がわかれば良いじゃないでしょうか。
そうするとidを参照できますよね？
そこからアルファベットを取り除くと番号だけが残ります。

#1のテストの結果。
document.images[i].onclickで関数を設定したら
this
で発生元が参照でき、
attachEventで追加したなら
event.srcElement（IE）
event.target(Firefox)
で発生元が参照できるんじゃないでしょうか。
違いますか？

お礼

二度の回答本当に感謝します。

そういうことだったのですね。完全に僕の理解力不足でした。すいません。試してみたところ無事解決しました！

本当にありがとうございました。

回答No.1

noname#30818

簡単なテスト方法です。
iは10まで増やしているのでイベント発生時は10になっているんじゃないかな。
window.onload = function(){
/*
for (var i = 0; i < document.images.length; i++){
document.images[i].onclick= b_method;
}
*/
for (var i = 0; i < document.images.length; i++){
document.images[i].attachEvent('onclick', function(event) { c_method(i); });
}
}

function b_method(){
alert(this.id.replace(/[a-z]+/,''));//this = imgイベントの発生元
}
function c_method(){
alert(window == this);//this = window
alert(event.target)//undefined(IE)
alert(event.srcElement.id)//event.srcElement = imgイベントの発生元
}

お礼

回答ありがとうございます。

テストしてみたところ、おっしゃられている通りonclickが呼ばれた時に、b_methodに現在のiの値が渡されているらしく、どれをクリックしても10になっているようでした。

そこで他の方法をいろいろと考えてみたのですが、なかなか良い方法が思いつきません。何か良い方法はないでしょうか。document.getElementById('xxx').innerHTML = '<img id="nantoka1" onclick="self.b_method(' + i + ')" />'; なんて方法も使えないですし・・・。