jQuery イベントの繰り返し

質問

jQuery　イベントの繰り返し

ボタンが.button1から.button10まであり、それぞれを押すと
.imgareaに1.ipgから10.jpgまでを表示させたいと思っています。

jQueryで下記のように書いたのですが、
最後のiが10のときのイベントしか反映されません…。
うまく記述するにはどうすればよいでしょうか？
よろしくお願いいたします。

for(i=1; i<=10; i++){
$(".button"+i.toString()).click(function(){
$(".imgarea").attr("src",i.toString()+".jpg");
})
}

回答No.1

yyr446 · ベストアンサー

まず　$(".何々")というのはclassのセレクター指定ですが、
それは大丈夫ですか、こおいった場合class属性じゃなくid
属性使うのが自然だと思うんですが...だいじょうぶですよねえ
それはさておき、イベントハンドラーにiが渡ってませんよ！

（i.toString()のtoString()はこのさい省略しても大丈夫です。
勝手に文字連結されます。）

$(function(){
for(i=1; i<=10; i++){
$("#button"+i).bind("click",{x:i},function(e){
$("#imgarea").attr("src",e.data.x+".jpg");
$("#imgarea").attr("alt",e.data.x+".jpg");
});
}
});

<div>
<button id="button1">1</button>
----------------------
<button id="button10">10</button>
<img id="imgarea" src="hoge" alt="hoge">
</div>

ですね

お礼

classとidに関しては、表示されるからいっか!
みたいに思っちゃってる部分はありますね…。
きちんとします。すみません。

上記のやり方で出来ました。
助かりました。ありがとうございます。。