Jquery on change 每个只更新一个输入

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 并更改他的工作时间，只有他的 "money" 输入正在更新，而其他两个保持不变，直到我更改他们的 "hours" 字段。

我真的很想了解如何一起使用 .change 和 .each

Answer 1

是的，这是因为您同时只能编辑一个文本字段。因此，逻辑上只会触发一个 onChange 事件。此外，您不需要 each 循环，因为您可以直接使用 .change 对返回的 jQuery 数组进行操作。因此，使用您的示例，这应该可以解决问题：

$('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属性值在整个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() 行来阻止浏览器执行默认操作。如果您遇到问题，请记住这一点。

Jquery on change 每个只更新一个输入

Jquery on change each only updates one input

each

jquery

onchange