时间戳

首页 > 解决方案 > 将从 javascript 提示收集的数据写入引导卡

javascript - 将从 javascript 提示收集的数据写入引导卡

问题描述

我有一个 javascript 函数，提示我输入一个值，我希望能够将收集到的值写入引导卡

        function GenerateCard() {
                var retVal = prompt("Enter action Name : ", "action name here");
                if (retVal !== null && retVal !== '') {
                    $('#actCard')
                        .clone()
                        .attr('id', 'action' + iCnt)
                        .appendTo("#container2");

                $("#action" + iCnt).html(retVal);

                    $("#container2").attr('style', 'border:solid 1px #555;');

                    iCnt = iCnt + 1;

                }
        }

这是组件的代码。从上面的提示中收集的值应该放在卡片正文中，当我生成更多时，它们应该在不同的行上。我正在克隆 actCard div。

如何写入“actCard”的这个内部 div 并在 container2 div 中显示？

        <div class="me-3">
            <div class="border border-dark p-2 mb-3">
                <b>Actions</b>
            </div>
            <!-- start here Hidden div reserved for cloning-->
            <div id="actCard" class="card" style="display: none;" >
                <div class="card-body">
                   <!-write retval here -->
                </div>
            </div>          
            <!-- end here -->
            <div id="container2" style="display: none;"></div>
        </div>

标签： javascriptjquery

解决方案

您可以使用在容器 div 中添加的最后一个 div 的参考，:last然后使用.text().

演示代码：

var iCnt = 1

function GenerateCard() {
  var retVal = prompt("Enter action Name : ", "action name here");
  if (retVal !== null && retVal !== '') {
    $('#actCard')
      .clone()
      .attr('id', 'action' + iCnt).attr("style", "")
      .appendTo("#container2 .row");
    $("#container2 .card:last .card-body ").html("<H4>"+retVal+"</H4>") //get last one and add text there

    $("#container2").attr('style', 'border:solid 1px #555;');

    iCnt = iCnt + 1;

  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="me-3">
  <div class="border border-dark p-2 mb-3">
    <b>Actions</b>
  </div>
  <!-- start here Hidden div reserved for cloning-->
  <div id="actCard" class="col-sm-3" style="display: none;">
   <div class="card">
    <div class="card-body">
      
    </div>
    </div>
  </div>
  <!-- end here -->
  <div id="container2" class="container"> <div class="row"></div></div>
</div>
<button onclick="GenerateCard()">Click</button>

推荐阅读