Question

我有一个带有按钮的textarea，当我点击提交按钮时，此textarea的内容插入<p>，但是当我点击提交2次或更多次与textarea中的另一个文本时，新文本替换较旧的<p>中的旧文字在之前生成。我不想这样做，我想用textarea的新文本制作新的p，而不用旧文本替换旧p标签中的旧文本。每个p插入一个转盘，但没关系。

这是我的代码：

最初的p：

<div class="jcarouselbtext"  data-jcarousel="true">
  <ul class="popupbtext">
    <li><p class="info1">oLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
  </ul>
</div>

带按钮的textarea：

<textarea id="textarea"></textarea>
  <input type="button" id="getvalue" value="Enviar texto" class="demobutton">

javascript代码：

$(function () {
  $('#getvalue').click(function(){
    var textarea_value = $('#textarea').val();
    $('.show-textarea-value').html(textarea_value);
    var $btext = $('.popupbtext');
    var template = $('#template3').html();
    $btext.append(template);
    $('.jcarouselbtext').jcarousel('reload', {
    animation: 'slow'
  });
}); 

});

新p标签的脚本模板：

<script id="template3" type="text/template">
  <li><p  class="info1 show-textarea-value"></p></li>
</script>

Answer 1

更新了答案

Here's a fiddle with what I think you're looking for

$(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'
        //});
    }); 
});

*我注释掉了jCarousel代码，因为它抛出了错误。

原始答案

使用append（）代替html（）

更改

$('.show-textarea-value').html(textarea_value);

到

$('.show-textarea-value').append(textarea_value);

使用JQuery使html追加变量

1 个答案: