Question

我有一个包含两个输入字段的页面。我有一个JS对象（info），其中包含每个项目的“reference”和“value”字段。对于每个项目，都有一个对应的'input'字段，与'class'属性匹配。当用户更新匹配的输入字段时，我想在info对象中添加它的'value'。

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

任何人都可以帮我解决我出错的地方吗？（我可以看到使用'each'的解决方案，其中所有输入的数据都需要添加到数组/对象。我一直在为匹配的字段获取数据。）

$(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

您的问题是因为当循环结束时SimpleDateFormat dateFormat = new SimpleDateFormat("dd-MM-YYYY hh:mm", new Locale("zh","CN"));将是p。因此，所有点击处理程序都将更新location对象，无论它们附加到哪个元素。

要解决此问题，您可以使用闭包在创建事件处理程序逻辑时保留location的范围。另请注意，当您循环浏览对象的属性时，p没有实际意义;它必须存在才能实现迭代。试试这个：

＆＃13;

hasOwnProperty()

＆＃13;

$(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);
  }
})

＆＃13;

或者，您可以使用<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="" />上的class来检索所需对象，从而避免循环和关联关闭：

＆＃13;

input

＆＃13;

$(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);
  }
})

＆＃13;

Answer 2

您只需使用class属性按键更新对象：

＆＃13;

$(document).ready(function(){
  var info = {
    name: {
      ref: "a2350",
      value: ""
    },
    location: {
      ref: "a2351",
      value: ""
    }
  };
  
  $('input').focusout(function() {
      var className = $(this).attr('class');
      var inputValue = $(this).val();
      if (info.hasOwnProperty(className)) {
        info[className].value = inputValue;
      } else {
        // If you want to add unknown inputs to the object 
        info[className] = {ref: "", value: inputValue};
      }
          
      console.log(info);
    });
})

＆＃13;

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

＆＃13;

Answer 3

你需要更像的东西：

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

    var info = {
      name: {
        ref: "a2350",
        value: ""
      },
      location: {
        ref: "a2351",
        value: ""
      }
    };

    for (var p in info) 
    {
        if ( info.hasOwnProperty(p) ) 
        {
            doSomethingWith(p);
        } 
    }

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

            console.log(p);   /// p = the class of the input now.
        });
    }

});

</script>


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

如何动态获取匹配的输入字段以在Javascript中向对象添加值？

3 个答案: