获取输入值并生成多个textarea并在那里设置值

Question

我有这样的DOM，当我填充输入字段并单击我需要创建textarea元素的按钮并在那里存储输入值。 如果我多次点击创建多个textarea和多个ID，我怎么能这样做，请检查我的代码，最好的答案必须得到赞赏

＆＃13;

＆＃13;

$('#note').on('click', function(){
 var storedNoteVal = $('#enterVal').val();
 var count_id = 1;
 var noteCov = $('.note_cover');
 $('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea></textarea></div>');
 $(noteCov).find('textarea').val(storedNoteVal);
 $(noteCov).each(function(index, element) {
     $(this).attr('id', 'noteId' + count_id);
     count_id++;
 });
			
});

＆＃13;

.full-width.note_cover {
    float: left;
	margin-bottom:15px;
}
.note_cover textarea {
    height: auto !important;
    height: 45px !important;
    resize: none;
    width: 100%;
	/*border:none;*/
}

＆＃13;

<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">
            
</div><!-- #content_bag -->

<input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
<button id="note">click me</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码工作正常，只需将storedNoteVal放入text-area，如果input为空，则text-area不会生成任何$('#note').on('click', function() { var storedNoteVal = $('#enterVal').val(); var count_id = 1; var noteCov = $('.note_cover'); if(storedNoteVal){ $('#content_bag').prepend('<div class="full-width note_cover" id="noteId"><textarea>' + storedNoteVal + '</textarea></div>'); //$(noteCov).find('textarea').val(storedNoteVal); $(noteCov).each(function(index, element) { $(this).attr('id', 'noteId' + count_id); count_id++; }); } });。

.full-width.note_cover {
  float: left;
  margin-bottom: 15px;
}
.note_cover textarea {
  height: auto !important;
  height: 45px !important;
  resize: none;
  width: 100%;
  /*border:none;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-11 col-md-offset-1 col-sm-8 col-xs-12 mtp" id="content_bag">

</div>
<!-- #content_bag -->

<div>
  <input type="text" placeholder="Enter project Tags" class="majorInp" id="enterVal" />
  <button id="note">click me</button>
</div>

<pubDate>Tue, 23 Aug 2016 10:00:00 CST</pubDate>

Answer 2

以Abhinshek为基础回答 -

您的代码实际上已将id重新分配给textareas，因为您在 pre 等待它们之后遍历所有元素。

您可以将count_id定义为窗口变量（在click函数之外），然后只需使用它。

此外，您不需要使用$（）包装noteCov，因为$（＆＃39; .note_cover＆＃39;）会返回一个jQuery对象数组

var count_id = 1;
$('#note').on('click', function() {
   var storedNoteVal = $('#enterVal').val();
   $('#content_bag').prepend('<div class="full-width note_cover" id="noteId_'+count_id+'"><textarea>' + storedNoteVal + '</textarea></div>');
    count_id++;
});

这样每个textarea都会获得它自己唯一不会改变的ID