Question

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

我需要div中的两个输入，将它们的值放入div之外的输入，用逗号（，）分隔。我做了一个小提琴https://jsfiddle.net/dc6v6gjd/1/。感谢

mon_synchronize' 
    /usr/lib/ruby/gems/2.1.0/gems/rake-11.2.2/lib/rake/task.rb:180:in

Answer 1

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

e.g。

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只从key1的最后一个输入id获取val（）

1 个答案: