數組中元素的動態增加和刪除
阿新 • • 發佈：2018-08-24
solid line point ont block mar 增加 cli image
1 <div class="ser-pup-line1"> 2 <div class="ser-pup-left"> 3 <span>使用配件</span> 4 </div> 5 <div class="ser-pup-right1"> 6 <div class="clone"> 7 <div class="ser-pup-add"> 8 <select name=""> 9 <option value="">請選擇</option> 10 <option value="">大保養</option> 11 <option value="">小保養</option> 12 </select> 13 <span></span> 14 <select name=""> 15 <option value="">請選擇</option> 16 <option value="">大保養</option> 17 <option value="">小保養</option> 18 </select> 19 </div> 20 </div> 21 <div class="ser-add"> 22 <div class="ser-lop"> 23 <img src="../img/add.png" alt="" class="img-add" /> 24 <span>添加使用配件</span> 25 </div> 26 <div class="ser-lop"> 27 <img src="../img/minu.png" alt="" class="img-minu" /> 28 <span>刪除</span> 29 </div> 30 </div> 31 </div> 32 </div>
.ser-pup-line{
width: 100%;
height: 30px;
margin-bottom: 20px;
}
.ser-pup-left{
float: left;
width: 18%;
height: 30px;
line-height: 30px;
/*background: #007DDB;*/
}
.ser-pup-left span{
float: right;
margin-right: 20px;
}
.ser-pup-right{
float: left;
height: 30px;
width: 82%;
/*background: #009E94;*/
}
.ser-pup-right input{
width: 85%;
height: 28px;
}
.ser-pup-line1{
width: 100%;
overflow: hidden;
margin-bottom: 20px;
}
.ser-pup-left1{
float: left;
width: 18%;
height: 30px;
line-height: 30px;
}
.ser-pup-right1{
float: left;
overflow: hidden;
width: 82%;
margin-bottom: 10px;
/*background: #009E94;*/
}
.ser-lop{
float: left;
margin-right:10px;
}
.ser-pup-add{
width: 100%;
overflow: hidden;
margin-bottom: 10px;
}
.ser-pup-add select{
float: left;
display: inline-block;
width: 37%;
height: 30px;
}
.ser-pup-add div{
float: left;
display: inline-block;
width: 37%;
height: 30px;
line-height: 30px;
text-align: center;
border:1px solid #ccc;
}
.ser-pup-add span{
float: left;
display: inline-block;
width: 25px;
height: 15px;
border-bottom: 2px solid #ccc;
color:#ccc;
margin:0 3%;
}
.ser-add{
float: left;
width: 100%;
height: 30px;
line-height: 30px;
}
.ser-add img{
float: left;
width: 28px;
height: 28px;
cursor: pointer;
}
.ser-add span{
float: left;
display: inline-block;
font-size: 12px;
margin-left:10px;
}
//圖片點擊克隆
$(‘.img-add‘).click(function() {
var atr = $(".clone>div").eq(0).clone();
$(".clone").append(atr);
})
//圖片點擊減少
$(‘.img-minu‘).click(function() {
debugger
var arr = $(".clone");
for(var j = 0; j <= arr.length; j++) {
var Arr = $(arr[j]).find("div");
for(var i = 0; i <= Arr.length; i++) {
if(i == (Arr.length - 1)) {
if(i >= 1) {
$(Arr[i]).remove();
}
return;
}
}
}
})
數組中元素的動態增加和刪除