如何在每次单击按钮时将字符串设置为新除法

Question

当我单击一个按钮Add Card调用add()函数时。这将显示一个textbox和一个button，然后取一个值。button具有读取值的addtext()函数。然后，它应将值设置为同一区域内的div。

我能够设置值。但是这些值附加到相同的div.

我想要什么：

• 从textbox读取值

• 每次将textbox中的值设置为新的div。

div应低于前一个。

网页代码：

<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>