jQueryループによる初期化の変更イベント

Question

次のコードを使用して、7つのドロップダウンにonchangeイベントをバインドしようとしています。しかし、bodysys1が変化すると、i = 8となるので、$('input[id$="bodysys' + i + 'spec"]')[0]は未定義です。

$(function() { 
    for (var i = 1; i <= 7; i++) { 
     $('select[id$="bodysys' + i + '"]').change(function() { 
      if (this.value == "99") 
       enabletextbox($('input[id$="bodysys' + i + 'spec"]')[0]); 
     }); 
    } 
} 

これは明らかに正しい方法ではありません。

Answer 1

これが最後の唯一の問題と呼ばれ、クロージャを使用して解決される。

$(function() { 
    for (var i = 1; i <= 7; i++) { 
     (function (i) { 
      $('select[id$="bodysys' + i + '"]').change(function() { 
       if (this.value == "99") 
        enabletextbox($('input[id$="bodysys' + i + 'spec"]')[0]); 
      }); 
     })(i); 
    } 
} 

それは新しいスコープを作成するので、私は、元の範囲で変更されたとき、それは変更されません。古いスコープ。

Answer 2

$('select[id*="bodysys"]').each(function (index) { 
     $(this).change(function() { 
      if ($("option:selected", this).val() == "99") 
       enabletext($('input[id$="bodysys' + (index + 1) + 'spec"]')[0]); 
     }); 
    }); 

このようにしても問題ありません。