Array.foreach只从最后一个输入id获得val（），并带有关键字

Question

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

我需要在div中的两个输入都将它们的值放入以逗号（，）分隔的div之外的输入中。我做了一个小提琴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>