<div class="s-power-form"> <div class="ui form p80-form clearfix write-content"> <div class="w-content-top"> <div class="inline fields"> <label>工作日期</label> <input type="text" placeholder="First Name" class="datepicker"> <i class="iconfont icon-rili"></i> </div> <div class="inline fields clear-both"> <label>是否补填</label> <div class="ui checkbox"> <input type="checkbox" name="example" class="write-check"> </div> </div> <div class="inline fields textarea-hide" style="display: none;"> <label>补填原因</label> <textarea rows="2"></textarea> </div> </div> <div class="w-content-bottom"> <div class="work-btn radius-btn"> <a href="javascript:;" class="del-w-btn"><i class="iconfont icon-shanchuxiangmu"></i>删除报工项</a> <a href="javascript:;" class="add-w-btn"><i class="iconfont icon-tianjiaxiangmu"></i>添加报工项</a> </div> </div> <div class="work-content-temp" style="display: none"> <div class="work-content-item"> <div class="inline fields"> <label>项目</label> <select class="ui selection dropdown"> <option value="0">广州地铁</option> <option value="1">华莱士</option> </select> </div> <div class="inline fields select-operate"> <label>模块</label> <select class="ui selection dropdown"> <option value="0">项目管理</option> <option value="1">人才机管理</option> <option value="2">文档库管理</option> </select> </div> <div class="inline fields date-input"> <label>开始时间</label> <input type="text" placeholder="First Name" class="timepicker"> </div> <div class="inline fields date-input"> <label>结束时间</label> <input type="text" placeholder="First Name" class="timepicker"> </div> <div class="inline fields date-input clear-both"> <label>工作时间</label> <input type="text" placeholder="7.5小时"> <span class="mgl10 gary"> (注:标准工作时间为 09:00~12:00,13:30~18:00) </span> </div> <div class="inline fields clear-both"> <label>工作内容</label> <textarea rows="5"></textarea> </div> </div> </div> <div class="clear-both bottom-btn mgt20"> <button class="ui button active">保存</button> <button class="ui button">取消</button> </div> </div> </div>
jq://初始化 contentInit(); initBtn(); $('.w-content-bottom').on('click','.work-btn>.add-w-btn',function () { //事件委托添加 contentInit(); initBtn(); //按钮处理 $('.timepicker').pickatime({ //再次初始化日期插件 clear: '清除' }); $('.ui.dropdown').dropdown(); //再次初始化下拉框 }); $('.w-content-bottom').on('click','.work-btn>.del-w-btn',function () { //事件委托删除 var deleObj = $(this).parents('.w-content-bottom').children('div:eq(-2)'); deleObj.slideUp(200,function () { deleObj.remove(); initBtn(); //按钮处理 }) }); //插入内容 function contentInit() { var item = $('.work-content-temp').html(); $('.w-content-bottom>.work-btn').before(item);//模板内容插入标签中 } //按钮处理 function initBtn() { $('.w-content-bottom>.work-content-item').each(function(index, obj){ if ($('.w-content-bottom>.work-content-item').length == 1){ $(this).parent('.w-content-bottom').find('.work-btn>.del-w-btn').hide(); //初始化隐藏删除按钮 }else { $(this).parent('.w-content-bottom').find('.work-btn>.del-w-btn').show(); } }) }附图: