如何在每次單擊按鈕時將字符串設置為新的格？

Question

當我單擊Add Card按鈕時， Add Card調用函數add() 。 這將顯示一個textbox和一個button ，然后接受一個值。 該button具有addtext()函數，該函數讀取該值。 然后，應將值設置為同一區域內的div 。

我可以設置值。 但是這些值適用於同一div 。

我想要的是：

• 從textbox讀取值

• 每次將textbox的值設置為一個新的div。

div應該低於上一個。

HTML代碼：

<a id="newcard" href="#" onclick="add()">
  <b style ="color: #444444">Add Card...</b>
</a>

<div class="flex-container">
  <div id="cardarea" class="parent2">
  <div>
  <span><b class="card1" id="cardtitle">Stuff To Try (this is a list)</b></span>
  <span>
    <i class="fa fa-ellipsis-h card1" title="List Actions" 
      tabindex="0" data-trigger="focus" data-toggle="popover"></i>
  </span>
<div>

<span id="show-ta">
  <textarea class="t" id="txtarea" style="display:none"></textarea>
<span>
<span id="newbutton">
  <button id="firstbutton" class="btn btn-success nbutton" onclick="addtext()" style="display:none">Add</button>
</span>

  </div>
</div>

CSS：

#add-card{
  margin-top:25px;
  margin-left:5px;
  margin-bottom:8px;
  margin-right:5px;
  border-radius:5px;
  background-color: #ffffff;
  height:30px;
  width: 250px;
  position: relative;
  display: none;
}

jQuery代碼：

var newTextBoxDiv = $(document.createElement('textarea'));
var wrapper = $('#cardarea');
var cards = $('#add-card');
var button = $(document.createElement('button'));

function add() {
    if ($('#txtarea').css('display') == 'none') {
        $('#txtarea').css('display', 'block');
    }
    if ($('#firstbutton').css('display') == 'none') {
        $('#firstbutton').css('display', 'block');
    }
    if (wrapper.find('textarea').last().val().length) {
        var x = wrapper.find('textarea').last().val();
        wrapper.addClass('text-a1');
        wrapper.addClass('nbutton');
    }
}

function addtext() {
    var a = $(document.getElementById('#add-card'));
    var value = wrapper.find('textarea').last().val();
    $('textarea').css("display", "none");
    $('button').css("display", "none");
    $('#add-card').css("display", "block");
    if (cards.find('div').last().val() != 0) {
        wrapper.append('<div id="add-card"></div>');
        cards.append(value).appendTo("#cardarea").insertAfter("#cardtitle");
    }
    alert(value);
    //$('#cardarea').text(wrapper.find('textarea').last().val());  
}

Answer 1

這是我認為您正在嘗試的基本要點（編輯之前）

以下是一些保持簡單的要點：

1. 將textarea和button包裹在單個wrapper並且僅顯示/隱藏此表單。 並且，每次要添加新卡時都要清除textarea
2. 提交textarea -讀取其值，使用它創建一個新的div ，然后追加到cardarea 。 之后，隱藏textarea

 var wrapper = $('#cardarea'); function add() { $('#txtarea').val(''); $('#cardform').show(); } function addtext() { var val = $('#txtarea').val(); $('<div class="card">').html(val).appendTo(wrapper); $('#cardform').hide(); } 

 .card { height: 20px; border: 1px solid blue; background: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="newcard" href="#" onclick="add()"> <b style="color: #444444">Add Card...</b> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </a> <div id="cardform" style="display:none"> <textarea id="txtarea"></textarea> <button id="firstbutton" class="btn btn-success nbutton" onclick="addtext()">Add</button> </div> <div id="cardarea"> <h3>Added Cards title</h3> </div>