每毫秒以毫秒级（setInterval）收集具有相同Class的所有输入的值，并将其包装-使用Jquery

Question

我尝试构建类似jsfiddle.net/pu3antasyah/5au979ck/的表单 。 从其他文本区域收集多个值，然后输入一个文本区域。

顺便说一句，如何像这样>> .step class从所有输入中收集所有输入值>> <input class="step" />并使用<li />包装。 发送到<textarea id="collectallfieldtosave texarea" />

 $(function(){ var scntDiv = $('#steparea'); var i = $('#steparea p').size() + 1; $('#addinput').live('click', function() { $('<p><input class="step-'+ i +'" value="step '+ i +'"><a href="#" class="remove">remove</a></p><br/><br/>').appendTo(scntDiv); i++; return false; }); $('.remove').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); window.setInterval(function(){ var space = ' ', line = '\\n', summary = $('.summary').val(), theyield = $('#yield').val(), IngredientsTitle = '<b>Ingredients for (<span class="yield">' +space+ theyield +'</span>)</b>', step = '<li>' + $('.step').val() + '</li>'; $('#collectallfieldtosave').val( summary + line + line + IngredientsTitle + line + line + '<ol>' + step + '</ol>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <textarea name="summary" rows="7" class="summary"></textarea> <br/><br/> <input id="yield" value="1 person"> <br/><br/> <div id="steparea"> <p><input class="step" value="step 1"><a href="#" class="remove">remove</a></p> <br/><br/> </div> <a href="#" id="addinput">add more step</a> <br/><br/> <br/><br/> <textarea id="collectallfieldtosave" name="nameoffield" rows="15" cols="70" placeholder=".." class="usp-textarea"></textarea> 

Answer 1

您不应该在这里直播。 在#steparea上使用on和侦听事件（不建议使用live），从您的解决方案开始，您必须使用$.each() jQuery fn进行迭代

 $(function(){ var scntDiv = $('#steparea'); var i = $('#steparea p').size() + 1; $('#addinput').live('click', function() { $('<p><input class="step" value="step '+ i +'"><a href="#" class="remove">remove</a><br/><br/></p>').appendTo(scntDiv); i++; return false; }); $('.remove').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); function findSteps(what){ var acc = ''; $(what).each(function(){ acc += '<li>'+$(this).val()+'</li>'; }); return acc; } window.setInterval(function(){ var space = ' ', line = '\\n', summary = $('.summary').val(), theyield = $('#yield').val(), IngredientsTitle = '<b>Ingredients for (<span class="yield">' +space+ theyield +'</span>)</b>', step = findSteps('.step'); $('#collectallfieldtosave').val( summary + line + line + IngredientsTitle + line + line + '<ol>' + step + '</ol>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <textarea name="summary" rows="7" class="summary"></textarea> <br/><br/> <input id="yield" value="1 person"> <br/><br/> <div id="steparea"> <p><input class="step" value="step 1"><a href="#" class="remove">remove</a><br/><br/> </p> </div> <a href="#" id="addinput">add more step</a> <br/><br/> <br/><br/> <textarea id="collectallfieldtosave" name="nameoffield" rows="15" cols="70" placeholder=".." class="usp-textarea"></textarea>