标签：jquery jianBtn 12px 实现 100% 加减 background font size

用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()
        })
    })

实现效果如下：

下次在遇到这样的需求时，代码直接就可以复用啦，也可以提高一下开发效率。如果小伙伴们有更好的实现方式可以交流交流啊。每天都要进步一点点！

标签：jquery,jianBtn,12px,实现,100%,加减,background,font,size
来源： https://blog.csdn.net/HuLuWa1997/article/details/115516475

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。