Question

我有以下代码，当＆＃34;浏览＆＃34;点击，我想在div中放置相同的内容＆＃34; projectidAppe＆＃34;并改变＆＃34;浏览＆＃34;到＆＃34;删除＆＃34;按钮。我使用以下jquery完成了这个，

＆＃13;

$(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"><i class="glyphicon glyphicon-picture"></i></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"><i class="glyphicon glyphicon-search"></i> 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);
});

＆＃13;

<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">
      <i class="glyphicon glyphicon-picture"></i>
    </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">
        <i class="glyphicon glyphicon-search"></i> Browse
        <input type="file" accept="image/*" id="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file">
      </div>
    </div>
  </div>
</div>

＆＃13;

但现在，txtProjectTitle＆＃39; s placeholder内的每个图片名称都没有分别发生。文件上传后，如何显示每个删除按钮以及如何在单击删除按钮时删除一行？

Answer 1

你的Html：

    <div id="projectidAppe">
<label for="exampleInputEmail1">Project Photos</label>
<div class="form-group file-uploader">
  <div class="input-group col-xs-12">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-picture"></i>
    </span>
    <input type="text" id="txtProjectTitle-0" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image">
    <div id="clearbtn-0" class="input-group-btn">
      <div class="browse btn btn-primary">
        <i class="glyphicon glyphicon-search"></i> Browse
        <input type="file" accept="image/*" class="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file">
      </div>
    </div>
  </div>
</div>
</div>
</div>

你的JS：

    var count = 1;
$(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"><i class="glyphicon glyphicon-picture"></i></span><input type="text" id="txtProjectTitle-'+count+'" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div id="clearbtn-'+count+'" class="input-group-btn"><div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" accept="image/*" class="idProjectTitle" multiple="multiple" name="fileUploadphoto" class="file"></div></div></div></div>';
  $("#txtProjectTitle-"+(count-1)).attr('placeholder', $(this).val().split('\\').pop());
  var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>';
  $('#clearbtn-'+(count-1)+' .browse').css('display','none');
  $('#clearbtn-'+(count-1)).append(btnDelete);
  $("#projectidAppe").append(datatoappend);
  count ++;
});
$(document).on("click", "#idImgDelete",function(){
    $(this).parentsUntil(".form-group.file-uploader").remove();
});

如何使用jquery为div添加多个时间？

1 个答案: