如何使用jquery为div添加多个时间？ [英] How to add more than one time to a div using jquery?

问题描述

我有以下代码，当浏览点击时，我想在divprojectidAppe中放置相同的内容，并将浏览更改为删除按钮。

I have the below code and when the "Browse" click, i want place the same content in the div "projectidAppe" and change the "Browse" to "Delete" button .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="exampleInputEmail1">Project Photos</label>
<div class="form-group file-uploader">
  <div class="input-group col-xs-12">
    <span class="input-group-addon">
      
    </span>
    <input type="text" id="txtProjectTitle" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image">
    <div id="clearbtn" class="input-group-btn">
      <div class="browse btn btn-primary">
         Browse
        <input type="file" accept="image/*" id="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file">
      </div>
    </div>
  </div>
</div>

我的尝试：



我使用以下jquery完成此操作，

What I have tried:

I have done this using the following jquery,

$(document).on("change", "#idProjectTitle", function(e) {
  var datatoappend = ' <div class="form-group file-uploader"><div class="input-group col-xs-12"><span class="input-group-addon"></span><input type="text" id="txtProjectTitle" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div class="input-group-btn"><div class="browse btn btn-primary"> Browse<input type="file" accept="image/*" id="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"></div></div></div></div>';
  $("#txtProjectTitle").attr('placeholder', $(this).val().split('\\').pop());
  var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>';
  $('#clearbtn').html('');
  $('#clearbtn').append(btnDelete);
  $("#projectidAppe").append(datatoappend);
});

但是现在，分别没有在txtProjectTitle的占位符中发生每个图像名称。文件上传后，如何显示每个删除按钮以及如何在单击删除按钮时删除一行？以下是屏幕截图，



ddd - imgbb.com [ ^ ]

推荐答案

（ document ）。on（ 更改， ＃idProjectTitle， function （e）{
var datatoappend = ' < span class =code-string>< div class =form-group file-uploader>< div class =input-group col-xs-12>< span class =input-group -addon> < / span>< input type =textid =txtProjectTitlestyle =height：35px！importantclass = form-control input-lgdisabled placeholder =Upload Image>< div class =input-group-btn>< div class = 浏览btn btn-primary> 浏览< input type =fileaccept =image / *id =idProjectTitlemultiple =multiplename =fileUploadphotoclass =file>< / div>< / div>< / div>< / div>';

(document).on("change", "#idProjectTitle", function(e) { var datatoappend = ' <div class="form-group file-uploader"><div class="input-group col-xs-12"><span class="input-group-addon"></span><input type="text" id="txtProjectTitle" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div class="input-group-btn"><div class="browse btn btn-primary"> Browse<input type="file" accept="image/*" id="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"></div></div></div></div>';

（< span class =code-string> #txtProjectTitle）。attr（' 占位符'，

("#txtProjectTitle").attr('placeholder',

（ this ）。val（）。 split（' \\'）。pop（））;
var btnDelete = ' < div id =idImgDeleteclass =browse btn btn-primary>删除< / div>';

(this).val().split('\\').pop()); var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>';

这篇关于如何使用jquery为div添加多个时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！