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并改变他的工作时间，只有他的“钱”输入正在更新而其他两个保持不变直到我改变他们的“小时” “田野。

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

Answer 1

是的，这是因为您只能同时编辑一个文本字段。因此，逻辑上只触发一个onChange事件。此外，您不需要每个循环，因为您可以使用.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]);
    });
  });
});

此外，为money输入字段提供id没有意义，因为html id属性值在整个html文档中应该是唯一的。请改用name，它可能会多次出现。因此，将行myH = $(this).find('#hours').val();更改为myH = $(this).find('input[name="hours"]').first().val();。 .first()用于获取数组的第一个元素（如果是1）。

因此，更短的完整解决方案看起来像这样：

$('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每个只更新一个输入

1 个答案: