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");
})
}
投稿日時 - 2010-09-06 16:56:17
まず $(".何々")というのは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>
ですね
投稿日時 - 2010-09-06 17:47:07
お礼
classとidに関しては、表示されるからいっか!
みたいに思っちゃってる部分はありますね…。
きちんとします。すみません。
上記のやり方で出来ました。
助かりました。ありがとうございます。。
投稿日時 - 2010-09-06 18:22:47
4人が「このQ&Aが役に立った」と投票しています
