我有一个文本区,当你添加内容时,它会自动添加项目符号,问题是当一个新的行被添加时,它应该添加单独的ullet点。问题是它的内容完全附加了
下面是我如何添加内容
应该是这样的
下面是片段
null
$(function(){
$('#getvalue').click(function(){
// Get the text area value
var textarea_value = $('#textarea').val();
// Get a jQuery object of the template html
var templateHolder = $($('#template3').html());
// Put the text area text inside of the template's <p> tag
// Use .html() to overwrite the old content with the new
// content every time
templateHolder.find('p').html(textarea_value);
// Get a reference to the <ul> element
var $btext = $('.popupbtext');
// Add the template (with text area text) to the <ul> element
$btext.append(templateHolder);
// Commented out because it was throwing errors.
// Left in because it was part of original fiddle
//$('.jcarouselbtext').jcarousel('reload', {
// animation: 'slow'
//});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<br/>
<input type="button" id="getvalue" value="Send text" class="demobutton">
<div class="jcarouselbtext" data-jcarousel="true">
<ul class="popupbtext">
<li>
<p class="info1">First bullet point</p>
</li>
</ul>
</div>
<script id="template3" type="text/template">
<li>
<p class="info1 show-textarea-value"></p>
</li>
</script>
null
尝试根据新行拆分文本,并将它们作为新列表项添加到popupbtext元素中
null
$(function(){
$('#getvalue').click(function(){
// Get the text area value
var textarea_value = $('#textarea').val();
var lines = textarea_value.split('\n'); //Split the text content based on new line and iterate through each line then add them as seperate list item
lines.forEach(function(line){
// Get a jQuery object of the template html
var templateHolder = $($('#template3').html());
// Put the text area text inside of the template's <p> tag
// Use .html() to overwrite the old content with the new
// content every time
templateHolder.find('p').html(line);
// Get a reference to the <ul> element
var $btext = $('.popupbtext');
// Add the template (with text area text) to the <ul> element
$btext.append(templateHolder);
});
// Commented out because it was throwing errors.
// Left in because it was part of original fiddle
//$('.jcarouselbtext').jcarousel('reload', {
// animation: 'slow'
//});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<br/>
<input type="button" id="getvalue" value="Send text" class="demobutton">
<div class="jcarouselbtext" data-jcarousel="true">
<ul class="popupbtext">
<li>
<p class="info1">First bullet point</p>
</li>
</ul>
</div>
<script id="template3" type="text/template">
<li>
<p class="info1 show-textarea-value"></p>
</li>
</script>