单击按钮上的多个div窗口

Question

我无法正确构建标题。但问题是，我正在申请表格，要求用户输入地址。我已将地址1和地址2保存在两个单独的div中，其中我的地址2被隐藏。我提供单击address2 div时，address1 div的按钮打开。在地址2中，单击“添加”时还有两个按钮，地址2的克隆副本应该打开，当点击“删除”时，div应该隐藏。问题是我能够添加和删除div。但是当我点击地址2的ADD按钮时，会弹出很多窗口。我只需要弹出一个用户要求。

到目前为止，我能够编写这段代码。告诉我哪里出错了。  代码如下

</div>
<div class="div1 target">Address
<div>
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1"    name="add1" required/>

</div>
<div>
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/>
</div>


<div>
Country<span class="red">*</span> 

<select name="country" id="country">
<option selected="selected" value=""> Choose Country </option>
<option id="coun1" value="coun1">Country1</option>
<option id="coun2" value="coun2">Country2</option>
<option id="coun3" value="coun3">Country3</option>
<option id="coun4" value="coun4">Country4</option>
</select>
State<span class="red">*</span> 
<select name="state"  id="state">
<option selected="selected" value=""> Choose State </option>
<option class="st1" value="st1">State1</option>
<option class="st1" value="st1">State2</option>
<option class="st1" value="st1">State3</option>
<option class="st1" value="st1">State4</option>
<option class="st2" value="st2">State5</option>
<option class="st2" value="st2">State6</option>
<option class="st2" value="st2">State7</option>
<option class="st2" value="st2">State8</option>
<option class="st3" value="st3">State9</option>
<option class="st3" value="st3">State10</option>
<option class="st3" value="st3">State11</option>
<option class="st3" value="st3">State12</option>
<option class="st4" value="st4">State13</option>
<option class="st4" value="st4">State14</option>
<option class="st4" value="st4">State15</option>
<option class="st4" value="st4">State16</option>
</select>

</div>

<div>Zip/Postal Code<span class="red">*</span>  
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/>
</div>
<input type="button" value="add" id="add0"/>
</div>



<div class="div3 target" style="display:none">Address
<div>
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1"   name="add1"         required/>

</div>
<div>
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/>
</div>


<div>
Country<span class="red">*</span> 

<select name="country" id="country">
<option selected="selected" value=""> Choose Country </option>
<option id="coun1" value="coun1">Country1</option>
<option id="coun2" value="coun2">Country2</option>
<option id="coun3" value="coun3">Country3</option>
<option id="coun4" value="coun4">Country4</option>
</select>
State<span class="red">*</span> 
<select name="state"  id="state">
<option selected="selected" value=""> Choose State </option>
<option class="st1" value="st1">State1</option>
<option class="st1" value="st1">State2</option>
<option class="st1" value="st1">State3</option>
<option class="st1" value="st1">State4</option>
<option class="st2" value="st2">State5</option>
<option class="st2" value="st2">State6</option>
<option class="st2" value="st2">State7</option>
<option class="st2" value="st2">State8</option>
<option class="st3" value="st3">State9</option>
<option class="st3" value="st3">State10</option>
<option class="st3" value="st3">State11</option>
<option class="st3" value="st3">State12</option>
<option class="st4" value="st4">State13</option>
<option class="st4" value="st4">State14</option>
<option class="st4" value="st4">State15</option>
<option class="st4" value="st4">State16</option>
</select>

</div>

<div>Zip/Postal Code<span class="red">*</span>  
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/>
</div>
<input type="button" value="add" id="add"/>
<input type="button" value="remove" id="remove"/>
</div>

$(document).ready(function(){
$("#add0").click(function(e){
    $(".div1").after($(".div3").show());
    e.preventDefault();
});
});
$(document).ready(function(){
$("#add").click(function(e){
    $(".div3").clone(true).insertBefore($(".div3"));
});
$("#remove").click(function(e){
    $(this).closest(".div3").hide();

});
e.preventDefault();
});

Answer 1

首先出现两个错误：当你插入.div3两次时，已经有两个.div3，当你按下添加按钮时，它会插入两个，你必须使用last（）来避免这种情况。 第二个错误：insertBefore（$（＆＃34; .div3＆＃34;））在所有.div3标签之前插入.div3以避免这种使用必须再次使用last（）现在它看起来像这样：$（＆＃34; .div3＆ ＃34;）最后（。）克隆（真）.insertBefore（$（＆＃34; .div3＆＃34;）。最后一个（））; 这个代码是正确的，你可以使用它

<!doctype html>
<html>
<head>
<title></title>
<style>

</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<div class="div1 target">Address
<div>
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1"    name="add1" required/>

</div>
<div>
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/>
</div>


<div>
Country<span class="red">*</span> 

<select name="country" id="country">
<option selected="selected" value=""> Choose Country </option>
<option id="coun1" value="coun1">Country1</option>
<option id="coun2" value="coun2">Country2</option>
<option id="coun3" value="coun3">Country3</option>
<option id="coun4" value="coun4">Country4</option>
</select>
State<span class="red">*</span> 
<select name="state"  id="state">
<option selected="selected" value=""> Choose State </option>
<option class="st1" value="st1">State1</option>
<option class="st1" value="st1">State2</option>
<option class="st1" value="st1">State3</option>
<option class="st1" value="st1">State4</option>
<option class="st2" value="st2">State5</option>
<option class="st2" value="st2">State6</option>
<option class="st2" value="st2">State7</option>
<option class="st2" value="st2">State8</option>
<option class="st3" value="st3">State9</option>
<option class="st3" value="st3">State10</option>
<option class="st3" value="st3">State11</option>
<option class="st3" value="st3">State12</option>
<option class="st4" value="st4">State13</option>
<option class="st4" value="st4">State14</option>
<option class="st4" value="st4">State15</option>
<option class="st4" value="st4">State16</option>
</select>

</div>

<div>Zip/Postal Code<span class="red">*</span>  
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/>
</div>
<input type="button" value="add" id="add0"/>
</div>



<div class="div3 target" style="display:none">Address
<div>
Primary<span class="red">*</span> <input type="text" placeholder="Address 1" id="add1"   name="add1"         required/>

</div>
<div>
City<span class="red">*</span> 
<input type="text" placeholder="City" id="city" name="city" required/>
</div>


<div>
Country<span class="red">*</span> 

<select name="country" id="country">
<option selected="selected" value=""> Choose Country </option>
<option id="coun1" value="coun1">Country1</option>
<option id="coun2" value="coun2">Country2</option>
<option id="coun3" value="coun3">Country3</option>
<option id="coun4" value="coun4">Country4</option>
</select>
State<span class="red">*</span> 
<select name="state"  id="state">
<option selected="selected" value=""> Choose State </option>
<option class="st1" value="st1">State1</option>
<option class="st1" value="st1">State2</option>
<option class="st1" value="st1">State3</option>
<option class="st1" value="st1">State4</option>
<option class="st2" value="st2">State5</option>
<option class="st2" value="st2">State6</option>
<option class="st2" value="st2">State7</option>
<option class="st2" value="st2">State8</option>
<option class="st3" value="st3">State9</option>
<option class="st3" value="st3">State10</option>
<option class="st3" value="st3">State11</option>
<option class="st3" value="st3">State12</option>
<option class="st4" value="st4">State13</option>
<option class="st4" value="st4">State14</option>
<option class="st4" value="st4">State15</option>
<option class="st4" value="st4">State16</option>
</select>

</div>

<div>Zip/Postal Code<span class="red">*</span>  
<input type="text" placeholder="Zip/Postal" id="zpc" name="zpc" required/>
</div>
<input type="button" value="add" id="add"/>
<input type="button" value="remove" id="remove"/>
</div>

<script >
$(document).ready(function(){
$("#add0").click(function(e){
    $(".div3").show();
    e.preventDefault();
});
});
$(document).ready(function(){
$("#add").click(function(e){
    $(".div3").last().clone(true).insertBefore($(".div3").last());
});
$("#remove").click(function(e){
    if($(".div3").length!=1){
        $(this).closest(".div3").remove();
    }
    else{
        $(this).closest(".div3").hide();
    }
});
e.preventDefault();
});
</script>
</body>
</html>