如何在for循環中附加onchange處理程序

我有一個for循環，它遍歷表單中的依賴字段。陣列看起來像這樣：如何在for循環中附加onchange處理程序

var dependentFields = [ 
    { parent: FLDID_LABEL, children: [FLDID_LABEL_TEMPLATE, FLDID_LABEL_INSTRUCTIONS], choiceTrigger: 'Yes', markAsReq: true }, 
    { parent: FLDID_SHIP_TO, children: [FLDID_SHIP_TO_ADDR], choiceTrigger: 'No', markAsReq: true } 
];

我有一個函數被調用來附加所有的事件處理程序。爲了簡單起見，我將只顯示發生問題的循環。

function attachEventHandlers() { 
    // begin dependent fields 
    for (var i = 0; i < dependentFields.length; i++) { 
     var o = dependentFields[i]; 
     $('#' + o.parent).change(function() { 
      var visible = $('#' + o.parent + ' :selected').text() === o.choiceTrigger; 
      for (var c = 0; c < o.children.length; c++) { 
       var child = o.children[c]; 
       showField(child, visible); 
       if (o.markAsReq && $('#' + child).val() === '') { 
        MarkFieldAsRequired(child); 
       } 
      } 
     }); 
    } 
}

只有第二個依賴字段有效，第一個依賴字段沒有。我認爲這與從外部函數引用var i或var o的方式有關。有效地將相同的事件處理程序附加到所有依賴字段。我怎樣才能解決這個問題？

編輯：這裏是一個錯誤的jsfiddle：http://jsfiddle.net/H3Bv2/4/ 請注意如何更改任何父母隻影響第二個孩子。

來源

2012-10-12 styfle

你可以設置[小提琴]（http://www.jsfiddle.net）嗎？看着這個，看起來你的綁定是正確的。 – davehale23

我想通了。使用jQuery.each讓我避免在循環中定義變量。這裏是我的解決方案：

function attachEventHandlers() { 
    // begin dependent fields 
    $.each(dependentFields, function (i, o) { 
     $('#' + o.parent).change(function() { 
      var visible = $(':selected', this).text() === o.choiceTrigger; 
      for (var c = 0; c < o.children.length; c++) { 
       var child = o.children[c]; 
       showField(child, visible); 
       if (o.markAsReq && $('#' + child).val() === '') { 
        MarkFieldAsRequired(child); 
       } 
      } 
     }); 
    }); 
}

來源

2012-10-12 21:59:14 styfle

的解決方案在這裏看看：JavaScript closure inside loops – simple practical example。

你的原始代碼是指在每一個回調函數，一個變量o是在循環裏創造的 - 並重新分配在每個迭代變量的值，所以所有的回調的最終使用分配最後值。

來源

2012-10-12 22:12:33 kpozin

我沒有把這個標記爲正確答案，因爲你沒有回答這個問題。我知道問題是什麼。但我正在努力尋找相關鏈接。 – styfle

如何在for循環中附加onchange處理程序

回答

相關問題