javascript - 如何动态获取匹配的输入字段以将值添加到 Javascript 中的对象？

Question

我有一个包含两个输入字段的页面。我有一个 JS 对象(信息)，其中包含每个项目的“引用”和“值”字段。对于每个项目，都有一个相应的“输入”字段与“类”属性匹配。当用户更新匹配的输入字段时，我想在信息对象中添加它的“值”。

我遇到的问题是，它将值放在数组的最后一项 (location.value) 中，用于任一输入。

谁能帮我解决我哪里出错了？ (我可以看到使用“每个”的解决方案，其中所有输入的数据都需要添加到一个数组/对象中。我坚持获取匹配字段的数据。)

$(document).ready(function() {
  var info = {
    name: {
      ref: "a2350",
      value: ""
    },
    location: {
      ref: "a2351",
      value: ""
    }
  };
  for (var p in info) {
    if (info.hasOwnProperty(p)) {
      $('input.' + p).focusout(function() {
        var val = $(this).val();
        info[p].value = val; // Only setting value on the last item in array!
        //console.log(p);   /// p = always location!
        out();
      })
    }
  }

  function out() {
    console.log(info);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" class="name" />
<input type="text" class="location" value="" />

Answer 1

你的问题是因为当循环结束时 p 将是 location。因此，所有点击处理程序都将更新 location 对象，无论它们附加到哪个元素。

要解决此问题，您可以使用闭包在创建事件处理程序逻辑时保留 p 的范围。另请注意，当您遍历对象的属性时，hasOwnProperty() 没有实际意义；它必须存在才能进行迭代。试试这个:

$(document).ready(function() {
  var info = {
    name: {
      ref: "a2350",
      value: ""
    },
    location: {
      ref: "a2351",
      value: ""
    }
  };

  for (var p in info) {
    (function(p) {
      $('input.' + p).focusout(function() {
        var val = $(this).val();
        info[p].value = val;
        out();
      })
    })(p);
  }

  function out() {
    console.log(info);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" class="name" />
<input type="text" class="location" value="" />

或者，您可以通过在 input 上使用 class 来检索所需的对象，从而避免循环和相关的闭包:

$(document).ready(function() {
  var info = {
    name: {
      ref: "a2350",
      value: ""
    },
    location: {
      ref: "a2351",
      value: ""
    }
  };

  $('input').focusout(function() {
    var className = $(this).attr('class');
    if (info.hasOwnProperty(className))
      info[className].value = this.value;
    out();
  });

  function out() {
    console.log(info);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" class="name" />
<input type="text" class="location" value="" />