【jQuery】for文ではイベント登録できない？

質問

• 複数のボタンがあり、対応したdiv要素がanimateを行うギミックを作成しているが、for文でclickイベントを登録しようとしてうまく動作しない。
• for文ではイベントの登録は行えないのか？
• 上記のケースでは、for文ではなく各ボタンごとにclickイベントを登録するのが適切と考えられる。

回答No.1

mtaka2 · ベストアンサー

JavaScriptの言語仕様の問題です。
forループが終わってイベント登録が完了した時点では、変数iは3になっています。
その後、ユーザー操作でマウスのクリック動作した時に、イベント関数が呼び出されますから、
> $(divArray[i]).animate({width: "0px"}, "slow", "swing");
この部分は、全て
> $(divArray[3]).animate({width: "0px"}, "slow", "swing");
として処理されることになります。
そのため、期待通りの動作にならないのです。

対策ですが、
---
jQuery(function($){
　var buttonArray = ["#button0", "#button1", "#button2"];
　var divArray = ["#box0", "#box1", "#box2"];
　function setCallback(i) {
　　$(buttonArray[i]).click(function(){
　　　$(divArray[i])).animate({width: "0px"}, "slow", "swing");
　　});
　}
　for(i=0; i<buttonArray.length; i++){
　　setCallback(i);
　}
});
---
のように、イベント設定処理を関数化すれば、ループ中で関数呼び出しにより毎回新たな変数iが作られますから、期待通りの結果になるかと思います。

さらに、無名関数を使えば、
---
jQuery(function($){
　var buttonArray = ["#button0", "#button1", "#button2"];
　var divArray = ["#box0", "#box1", "#box2"];
　for(i=0; i<buttonArray.length; i++){
　　(function(i) {
　　　$(buttonArray[i]).click(function(){
　　　　$(divArray[i])).animate({width: "0px"}, "slow", "swing");
　　　})(i);
　}
});
---
のように書くこともでき、もうちょっと簡潔になります。

お礼

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

　>>JavaScriptの言語仕様の問題です。
　>>forループが終わってイベント登録が完了した時点では、変数iは3になっています。
　>>その後、ユーザー操作でマウスのクリック動作した時に、イベント関数が呼び出されますから

なるほど…！
forループ毎にイベント登録され、それを呼び出してくれるのではなく、
clickイベント時にループ完了時点の変数iで呼び出されるのですね。
非常によく理解することができました。

また、対策の具体例を2つも提示して頂き、大変助かります。
どちらも試したところ、期待する動作を得ることができました。

jQueryの無名関数は、あらゆる場面で万能ですね…。
引き続き勉強していきたいと思います。

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