如何動態獲取匹配的輸入字段以在Javascript中向對象添加值？

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

您的問題是因為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="" /> 

Answer 2

您只需使用class屬性按鍵更新對象：

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

 <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="" /> 

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="" />