gpt4 book ai didi

javascript - 使用for循环追加div

转载 作者:行者123 更新时间:2023-11-28 04:26:47 30 4
gpt4 key购买 nike

在我的代码中,我有一个用户填写的 HTML 表单。然后,他们在“member”字段中输入一个值,然后单击按钮以生成 div = 'sector_prop' 的其他副本。表格部分是 - 扇区数量 (LTE)

<br>                                                                   
<br>
<input type="text" id="member" name="member" value="">
<br>
<br>

<button>Generate Sector Properties</button>

这里 div“sector_prop”是

<div class="sector_prop">
<fieldset>
Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS
for Band 4 and PCS for Band 2)<br>
<br>
<select name="lte_freq1">
<option value="6">850</option>
<option value="2">AWS</option>
<option value="4">PCS</option>
</select>
<br>
</fieldset>

我想使用 for 循环附加 div。此代码对于值 1、2、3、4、5 非常有效。当 number 的值是 6 或以上时,代码会中断并附加超过所需的 div。我试图找出为什么会发生这种情况。有什么建议吗?

$(document).ready(function(){
$("button").click(function(){
var number = document.getElementById("member").value;
var repeat = $('.sector_prop');
var cloned = repeat.clone(true);
console.log(number);
for (i=1;i<number;i++){
cloned.appendTo('.sector_prop');
console.log(i);
console.log(cloned);
}


});
});

$(document).ready(function(){
$("button").click(function(){
var number = document.getElementById("member").value;
var repeat = $('.sector_prop');
var cloned = repeat.clone(true);
console.log(number);
for (i=1;i<number;i++){
cloned.appendTo('.sector_prop');
console.log(i);
console.log(cloned);
}


});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

<form action="/form" method="post">

<fieldset>
<legend><b> Transport Information</b></legend>
<br>
<br>
OAM IP:<br>
<input type="text" name="oam_ip" pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$" required>
<br>
<br>

<fieldset>
<fieldset>
<legend><b> RF Parameters</b></legend>
<br>
Number of Sectors (LTE)<br>
<br>
<input type="text" id="member" name="member" value="">
<br>
<br>

<button>Generate Sector Properties</button>

<br>
<br>
<fieldset>

<div class="sector_prop">
<fieldset>
Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS for Band 4 and PCS for Band 2)<br>
<br>
<select name="lte_freq1">
<option value="6">850</option>
<option value="2">AWS</option>
<option value="4">PCS</option>
</select>
<br>

<br>


</fieldset>
</div>

<input type="submit">
</form>
<br>
<br>
</body>

最佳答案

这看起来像你所说的吗?

$(document).ready(function(){
$("button").click(function(){
var number = document.getElementById("member").value;
var repeat = $('fieldset');
var cloned;
//console.log(number);
for (i=1;i<number;i++){
cloned = repeat.clone(true);
cloned.appendTo('.sector_prop');
//console.log(i);
//console.log(cloned);
}


});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<input type="text" id="member" name="member" value="">
<br>
<br>

<button>Generate Sector Properties</button>
Here div "sector_prop" is

<div class="sector_prop">
<fieldset>
Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS
for Band 4 and PCS for Band 2)<br>
<br>
<select name="lte_freq1">
<option value="6">850</option>
<option value="2">AWS</option>
<option value="4">PCS</option>
</select>
<br>
</fieldset>
</div>

关于javascript - 使用for循环追加div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44980522/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com