jqueryのfor文を使った繰り返しが上手くいきません。

Question

###前提・実現したいこと
jqueryのfor文を使った繰り返しが上手くいきません。
実現したいこととしては、phpの方で指定しているボタン(id=check_buton＋0からnumberOfQuestion番目までの番号)ごとに、指定している要素（class=v＋0からnumberOfQuestion番目までの番号）の末尾にhtmlの要素を追加するということを実現したいです。
ですが、思ったように、動作してくれません。
下記のコードだと、
phpの方で指定しているボタンは、全て動作しますが、
変数のclassName=v9になっているようで、思ったように動作しません。お手数ですが、どなたか解決方法が分かる方がいらっしゃいましたら、教えていただけると幸いです。
よろしくお願いいたします。

###該当のソースコード

<script>
    var numberOfQuestions = <?php echo $NumberOfQuestions; ?>;
    $(function () {
        for (var i = 0; i < numberOfQuestions; i++) {
            var className = 'v' + i;
            var checkButton = 'check_button' + i;
            $('#' + checkButton).click(function () {
                $('.' + className).after('<img src=\'../img/img/img\' width=\'30\' height=\'30\'>');
            });
        }
    });
</script>

Answer 1

原因

for 文中でイベントハンドラ関数を定義した場合、外のスコープの変数はイベントハンドラが実行された時の値になります。
イベントハンドラが実行されたタイミングでは for ループは終了していますので、仮に numberOfQuestions === 5 であった場合、どのチェックボタンをクリックしても下記コードのように .v4 に対してimg要素ノードが挿入されることになります。

$('.v4').after('<img src=\'../img/img/img\' width=\'30\' height=\'30\'>');

問題の根本は下記スレッドが参考になると思います。

• JavaScript - JavaScriptにて、配列の要素一つ一つにイベントを実装したい(15895)｜teratail

質問のコードの場合、「#check_button1 -> .v1」の相関関係が成立しますので、クリックした時に event.currentTarget.id を元に className を算出するか、上記スレッドのようにクロージャや data-* 属性に対応する className を閉じ込めれば解決できるでしょう。
jQuery を使っているので event.data に閉じ込める方法も有ります。

[対策1] イベントハンドラ関数内で対象を算出する

• for文内でイベントハンドラを定義する - JSFiddle

'use strict';
jQuery('[id^="show-image-child-"').on('click', function (event) {
  jQuery('.' + event.currentTarget.id.replace(/-child(?=-)/, '-parent')).after('<img src="../img/img/img" width="100" height="30" alt="content" />');
});

[対策2] addEventListener の listener オブジェクトに閉じ込める

• for文内でイベントハンドラを定義する (addEventListener版) - JSFiddle

'use strict';
document.querySelectorAll('[id^="show-image-child-"').forEach(function (input) {
  input.addEventListener('click', {
    parent: jQuery('.' + input.id.replace(/-child(?=-)/, '-parent')),
    handleEvent: function handleClick () {
      this.parent.after('<img src="../img/img/img" width="100" height="30" alt="content" />');
    }
  }, false);
});

[対策3] クロージャに閉じ込める

• for文内でイベントハンドラを定義する (クロージャ版) - JSFiddle

'use strict';
jQuery('[id^="show-image-child-"').each(function (i, input) {
  var parent = jQuery('.' + input.id.replace(/-child(?=-)/, '-parent'));

  jQuery(input).on('click', function () {
    parent.after('<img src="../img/img/img" width="100" height="30" alt="content" />');
  });
});

[対策4] jQuery の event.data に閉じ込める

• for文内でイベントハンドラを定義する (jQuery event.data版) - JSFiddle

'use strict';
function handleClick (event) {
  event.data.parent.after('<img src="../img/img/img" width="100" height="30" alt="content" />');
}

for (var i = 1; i < 6; ++i) {
  jQuery('#show-image-child-' + i).on('click', {parent: jQuery('.show-image-parent-' + i)}, handleClick);
}

Re: tmng さん

Comments

[heroherohero]

コメントありがとうございました。
for 文中でイベントハンドラ関数を定義した場合、外のスコープの変数はイベントハンドラが実行された時の値になるということを知らなかったです。
おかげさまで、解決することができました。
data-*を使って、問題を解決しました。
ありがとうございました！

[think49]

入れ違いになりましたが、対策コード(4点)を追記しました。

質問のコードには、要素の数だけイベントハンドラが増殖する為、メモリを必要以上に消費する問題があります。
同じ関数を使いまわすか、一度に全要素のイベント定義する事でメモリ消費量を最小限にできます。
https://jsfiddle.net/qg9cf4de/3/ と https://jsfiddle.net/qg9cf4de/4/ を比較すると分かりやすいかもしれません。

Answer 2

for文を使わなくても、下記で同じようなことができます。

var $check = ('[id^=check_button]');

$check.on('click', function () {    
  var $this = $(this), // クリックした対象の取得
  i = $check.index($this) + 1, // 番号の取得（0からの連番でいいなら1を足さなくてよい）
  className = 'v' + i;
  
  $('.' + className).after('<img src="../img/img/img" width="30" height="30">');   
});

Comments

[heroherohero]

コメントありがとうございます。
先に、コメントをいただいた方のを試したところ、実現することができました！
せっかくコメントをいただいたのに、組み込めずに申し訳ございません。
また、機会がありましたら、教えていだけますと幸いです。
ありがとうございました。

[yamato_hikawa]

カスタムデータ属性の方がわかりやすいので良いと思います。

Answer 3

僕の場合は、id=check_buttonと指定しているボタンタグに、 data-checkを設定しました。

<script> /*「v」ボタンを選択したら，Ⅴマークを追加する．*/ var numberOfQuestions = <?php echo $resultForNumberOfQuestions; ?>; $(function () { for (var i = 0; i < numberOfQuestions; i++) { var checkButton = 'check_button' + i; $('#' + checkButton).click(function () { var className = $(this).data('check'); $('.' + className).children().after('<img src=\'../img/v_gray.png\' width=\'30\' height=\'30\'>'); }); } }); </script>