Array.foreach 仅使用 keyup 从最后一个输入 ID 获取 val()

Question

请帮我弄清楚为什么只有最后一个输入 id 将其值添加到输入 id= #attr3 with keyup。

我需要 div 中的两个输入将它们的值放入 div 之外的输入中，并用逗号 (,) 分隔。我做了一个 fiddle https://jsfiddle.net/dc6v6gjd/1/。谢谢

<div id ="candy">
   <input type="text" id="attr1" name="emailAddress" value="">
   <input type="text" id="attr2" name="emailAddress" value="">
</div>
   <input type="text" id="attr3" name="username" value="">

$(document).ready(function () {

    var text = $("#candy :input").map(function () {
              return this.id; 
                        }).get();        
        var attr = [];

        for (i=0; i<text.length; i++) {
                attr.push('#'+ text[i]);
                }
        var mat = attr.join(", ");

    $(mat).keyup(function(){
         update();

    function update() {
        attr.forEach(function(index, i){
        // alert(i);
           $("#attr3").val( $(attr[i]).val() + "," );           

        });
      }      
   });

});

Answer 1

原因是您在 forEach 的每次迭代中覆盖了 attr3 的值。您可以改为使用 join 来获取值。

例如

function update() {
  var val = attr
    .map(function(a) { 
      return $(a).val(); 
    })
   .join(",");

   $("#attr3").val(val);
}

话虽如此，我可能会采用像这样更简单的解决方案。

// set the keyup event handler and add all inputs to an array.
var inputs = $("#candy :input").keyup(function() {
  update();
}).get();

// read all input values into comma separated string and update attr3
function update() {
  var val = inputs.map(function(i) {
    return $(i).val();
  }).join(",");
  
  $("#attr3").val(val);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="candy">
  <input type="text" id="attr1" name="emailAddress" value="">
  <input type="text" id="attr2" name="emailAddress" value="">
</div>
<input type="text" id="attr3" name="username" value="">

更新：支持动态添加输入。

$(document).on("keyup", "#candy :input", function() {
  update();
});

function update() {
  var val = $("#candy :input").get().map(function(i) {
    return $(i).val();
  }).join(",");

  $("#attrFinal").val(val);
}

var count = 3;
$("#add").click(function() {
  $("#candy").append("<input type='text' id='attr" + count++ + "' name='emailAddress' />");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="candy">
  <input type="text" id="attr1" name="emailAddress" value="">
  <input type="text" id="attr2" name="emailAddress" value="">
</div>
<input type="text" id="attrFinal" name="username" value="">

<button id="add">Add New</button>

Array.foreach 仅使用 keyup 从最后一个输入 ID 获取 val()

Array.foreach only gets val() from the last input id with keyup

javascript

jquery

arrays

keyup