用jquery方法实现加减行
DOM层:
<ul class="plusMinusLinesWrap">
<li>
<div>我是一行</div>
<div class="btnIcon jianBtn"></div>
</li>
<li>
<div>我是一行</div>
<div class="btnIcon jianBtn"></div>
</li>
<li>
<div>我是一行</div>
<div class="btnIcon jiaBtn"></div>
</li>
</ul>
css代码:
.plusMinusLinesWrap{
font-size: 0;
width: 100px;
background:#1890ff;
border-radius: 4px;
position:absolute;
top: 50px;
left: 50%;
padding: 10px;
li{
height: 32px;
border-bottom: 1px solid #dddddd;
line-height: 32px;
div{
font-size: 12px;
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight: bold;
color: #FFFFFF;
display:inline-block;
}
.btnIcon{
width: 12px;
height: 12px;
float:right;
margin-top: 9px;
cursor: pointer;
}
.jianBtn{
background:url("../img/jian-icon.png") no-repeat;
background-size: 100% 100%;
}
.jiaBtn{
background:url("../img/jia-icon.png") no-repeat;
background-size: 100% 100%;
}
}
}
jquery方法:
$(function () {
// 加减行
$('.plusMinusLinesWrap').on('click', '.jiaBtn', function () {
var html = `
<li>
<div>我是一行</div>
<div class="btnIcon jiaBtn"></div>
</li>`
$(this).parent().after(html);
$(this).removeClass('jiaBtn').addClass('jianBtn');
})
$('.plusMinusLinesWrap').on('click', '.jianBtn', function () {
$(this).parent().remove()
})
})
实现效果如下:
下次在遇到这样的需求时,代码直接就可以复用啦,也可以提高一下开发效率。如果小伙伴们有更好的实现方式可以交流交流啊。每天都要进步一点点!