美文网首页
点击添加图片/文本框

点击添加图片/文本框

作者: 阿鲁提尔 | 来源:发表于2018-09-20 16:26 被阅读0次
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>

相关文章

网友评论

      本文标题:点击添加图片/文本框

      本文链接:https://www.haomeiwen.com/subject/sxsnnftx.html