Question

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

我可以设置值。但这些值会被添加到相同的div。

我想要的是什么：

从textbox
每次都将textbox的值设置为新的div。

div应低于前一个。

HTML code：

<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

这是我认为你在尝试（编辑之前）的基本要点

以下是保持简单的一些要点：

将textarea和button打包在一个wrapper中，并仅显示/隐藏此表单。并且，每次要添加新卡时清除textarea
提交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>

如何在每次单击按钮时将字符串设置为新分区？

1 个答案: