18910140161

HTML-根据jQuery中的用户输入添加额外的DIV输入-堆栈溢出

顺晟科技

2022-10-18 12:38:37

213

我正在创建一个函数,用户将在其中插入一些值。并且基于用户已经输入了先前的DIV的值的数目,将出现输入的附加DIV.

例子
Insert number of user : `2`
基于用户输入数量的

附加输入

<代码>名称:名字:

如果用户输入name : name : ,则会有name : name : 名称,如果用户将其更改为3名,则会有2名称。

如何修复它,以实现我想要的2

2
<代码><;script SRC=“ https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js ”>;<;/script>;<;link rel=“ stylesheet ” href=“ https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ” integrity=“ sha384-ggoyr0ixcbmqv3xipma34md+DH/1fq784/j6cy/ijtquohcwr7x9jvorxt2mzw1t ” crossorigin=“ anonymous ”>;<;DIV ID=“ info ”>;<;DIV CLASS=“ COL-LG-12 MB-30 ”>;<;标签>;<;B>;<;SPAN style=“ COLOR:#e60000;”>;*<;/SPAN>;<;I>;插入用户编号<;/I&>;&;/B>:&;/LABEL&>;&;br>:<;DIV类=“ input-group-prepend ”>;<;INPUT CLASS=“ from-control ” TYPE=“ NUMBER ” PLACEHOLDER=“ 2 ” ID=“用户_编号”必需>;<;/DIV>;<;/DIV>;<;DIV类=“ col-LG-12 MB-30 ” ID=“用户”>;<;标签>;<;B>;<;span style=“ color:#e60000;”>;*<;/span>;<;I>;名称<;/I>;<;/B>;&;lt;/标签>;&;BR>;<;DIV类=“ input-group-prepend ”>;<;INPUT CLASS=“ from-control ” TYPE=“ TEXT ” ID=“ NAME ”必需>;<;/DIV>;<;/DIV>;<;/DIV>;


顺晟科技:

你的尝试离实现它很近。您需要实现一个事件处理程序,以便在输入字段值更改时执行函数。您可以使用example来实现这一点

每次执行该函数时,它都会清除 $('#user').hide(); $("#user_num").change(function() { $("#user").remove(); let m = $(this).val(); for (var i = 0; i < parseInt(m); i++){ $('#user').show(); } });,循环将HTML代码附加到该DIV<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div id="info"> <div class="col-lg-12 mb-30"> <label><b><span style="color:#e60000;">*</span><i>Insert number of user </i></b></label><br> <div class="input-group-prepend"> <input class="from-control" type="number" placeholder="2" id="user_num" required > </div> </div> <div class="col-lg-12 mb-30" id="user"> <label><b><span style="color:#e60000;">*</span><i> Name </i></b></label><br> <div class="input-group-prepend"> <input class="from-control" type="text" id="name" required > </div> </div> </div>次。

请尝试以下代码片段

.on('change', function(){ // do something })
<代码><;script SRC=“ https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js ”>;<;/script>;<;DIV ID=“ info ” style=“ margin:10px ”>;插入用户数:<;输入ID=“ in ” value=“ ”/>;  <;DIV ID=“ input-container ” style=“ margin-top:20px ”>;<;/DIV>;<;/DIV>;

<块引用>

注意:我将jQuery CDN更新为最新版本。你在哪里使用一个旧版本.

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航