时间戳

首页 > 解决方案 > 如何以用户在 jquery 中输入的次数显示相同的 div？

javascript - 如何以用户在 jquery 中输入的次数显示相同的 div？

问题描述

我有带支票付款的 POS 系统。当收银员根据输入的支票输入支票号码时，应生成支票明细表。

例如：如果他输入数字 5，同一个表单应该显示五次我如何用 jquery 做到这一点。

我已经完成了到目前为止我所做的事情！提前致谢

这是用户输入

<input type="number" class="form-control" id="numberOfChq" >
<a id="come" class="btn btn-primary">Submit</a>

这是要重复的 div <div id="chk_list" hidden></div>

这是我只尝试显示一次的 jquery，我想显示尽可能多的用户输入

        $("#come").click(function(){
           var chqNumebr = $("#numberOfChq").val();
           var i;
           for (i= 1; i <= chqNumebr; i++ ){
          var chqSh = $("#chk_list").slideDown("slow");
         }
       });

标签： javascriptjqueryuser-interfacedomfrontend

解决方案

试试下面的。

首先，我们需要一些东西来添加新的 div，所以我为此创建<div id="output"></div>了。

按下提交后，您会看到根据用户输入的数字添加了新的 div。但是我们必须确保#output每次函数运行时都清空，否则新创建的 div 只会继续添加到现有的 div 上。

其次，如果我们将有多个实例，#chk_list那么它不应该有一个 ID，因为所有 ID 都应该是唯一的。相反，我们将使用一个类。

$("#come").on('click', function() {
  var chqNumebr = $("#numberOfChq").val();
  //empty divs that are currently inside of #output
  $('#output').empty();
  for (var i = 0; i < chqNumebr; i++) {
    $('#output').append('<div class="chk_list"></div>')
  }
});
.chk_list {
  width: 50px;
  height: 30px;
  background: red;
  margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="form-control" id="numberOfChq">
<a id="come" class="btn btn-primary">Submit</a>
<div id="output"></div>

推荐阅读