js
var $listBox = $('#addItemListBox');
var htmlPrev='', htmlNext = '', htmlTxt = '', htmlImg = '';
htmlPrev +='<div class="addItemUpInfo" name="add-list">';
htmlPrev +='<div class="addItemUpInfoList">';
htmlNext +='</div>';
htmlNext +='<div class="addInputBox">';
htmlNext +='<div class="addImgBoxBtn flexUpSpan">';
htmlNext +='<span class="fontSize14 addItemUpText"><img src="./svg/ced25805b350f20ed18f20a02abacb5b.svg" alt="">添加文字</span>';
htmlNext +='<span class="fontSize14 addImgSpan addItemUpImg"><img src="./svg/40af63e349d9f70f5a6400ae23863f27.svg" alt="">添加图片<input class="addImgSpanInput" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"></span>';
htmlNext +='</div>';
htmlNext +='</div>';
htmlNext +='</div>';
htmlTxt += htmlPrev + '<div class="addInputBox"><div class="addConBox"><p><textarea></textarea></p><b></b></div></div>' + htmlNext;
htmlImg += htmlPrev + '<div class="addInputBox"><div class="addConBox"><img src="http://via.placeholder.com/600x150"><b></b></div></div>' + htmlNext;
$listBox.on('click', '.addItemUpText', function(){
var $this = $(this).parents('[name="add-list"]');
$this.after(htmlTxt);
});
$listBox.on('change', 'input', function(){
var $this = $(this).parents('[name="add-list"]');
$this.after(htmlImg);
$(this).val('');
});
$listBox.on('click', 'b', function(){
$(this).parents('[name="add-list"]').remove();
});
HTML
<div id="addItemListBox">
<div class="addItemUpInfo" name="add-list">
<div class="addInputBox">
<div class="addImgBoxBtn flexUpSpan">
<span class="fontSize14 addItemUpText"><img src="./svg/ced25805b350f20ed18f20a02abacb5b.svg" alt="">添加文字</span>
<span class="fontSize14 addImgSpan addItemUpImg">
<img src="./svg/40af63e349d9f70f5a6400ae23863f27.svg" alt="">添加图片
<input class="addImgSpanInput" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
</span>
</div>
</div>
</div>
</div>
网友评论