jquery更改每個只更新一個輸入

Question

我想了解它是如何工作的，爲什麼它只更新我正在處理的輸入。

我有以下3個輸入：

<div class="row member"> 
      <div class="input-field col s4 nogap"> 
      <input id="money" type="text" value="0"> 
      </div> 
      <div class="input-field col s4 nogap"> 
      <input id="hours" type="number" step="any" class="validate" value="0"> 
      </div> 
      <div class="input-field col s4 nogap"> 
      <input id="name" type="text" class="validate"> 
      </div> 
     </div> 

及以下JS：

$(document).ready(function() { 
var totalHours = 0; 
var totalwHours = 0; 
var money = 0; 
var perHours = 0; 

var wHours = [0, 0 , 0 ,0 , 0 ,0]; 
var wMoney = [0, 0 , 0 ,0 , 0 ,0]; 


$('div.member').each(function(index, obj){ 
    $(this).change(function(){ 
    myH = $(this).find('#hours').val(); 
    wHours[index] = myH; 
    var totalHours = 0; 
    for (var i = 0; i < wHours.length; i++) { 
     totalHours += wHours[i] << 0; 
    } 
    perHours = money/totalHours; 
    wMoney[index] = perHours * myH; 
    $(this).find('#money').val(wMoney[index]); 
    }); 
}); 
}); 

這一切的偉大工程，變量正確更新，但例如，如果我的工作部件2並改變他的小時數，只有他的「金錢」輸入更新，另外兩個保持不變，直到我改變他們的「小時」字段。

我真的想uderstand如何與.change和.each共同努力

Answer 1

是的，那是因爲你只能在同一時間編輯一個文本字段。因此，邏輯上只觸發一個onChange事件。另外，您不需要每個循環，因爲您可以直接在返回的jQuery數組上使用.change進行操作。因此，使用例如本應該爲你做的伎倆：

$('div.member').each(function(index, obj){ 
    $(this).change(function(){ 
    $('div.member').each(function (ind, textfields) { 
     myH = $(this).find('#hours').val(); 
     wHours[index] = myH; 
     var totalHours = 0; 
     for (var i = 0; i < wHours.length; i++) { 
      totalHours += wHours[i] << 0; 
     } 
     perHours = money/totalHours; 
     wMoney[index] = perHours * myH; 
     $(this).find('#money').val(wMoney[index]); 
    }); 
    }); 
}); 

此外，給予一個ID，錢輸入字段沒有意義，因爲HTML id屬性值應Bé整個HTML文檔中是唯一的。相反，使用name，它可能會出現多次。因此，將行myH = $(this).find('#hours').val();更改爲myH = $(this).find('input[name="hours"]').first().val();。 .first()用於獲取數組的第一個元素，如果它是一個。

因此，在較短的方式完整的解決方案看起來像這樣：

$('div.member').change(function (sender) { 
    sender.preventDefault(); 
    $('div.member').each(function (ind, textfields) { 
     myH = $(this).find('input[name="hours"]').first().val(); 
     wHours[index] = myH; 
     var totalHours = 0; 
     for (var i = 0; i < wHours.length; i++) { 
      totalHours += wHours[i] << 0; 
     } 
     perHours = money/totalHours; 
     wMoney[index] = perHours * myH; 
     $(this).find('#money').val(wMoney[index]); 
    }); 
}); 

您可能還需要sender.preventDefault()線，以防止瀏覽器執行的默認操作。如果遇到麻煩，請記住這一點。