主页 / 问题 / 1102651
Accepted
Владислав Самохин
Asked:2020-03-30 15:02:53 +0000 UTC2020-03-30 15:02:53 +0000 UTC

将 data-id 添加到 jquery 元素

  • 772

您能告诉我如何将本地照片分配给具有背景的data-id='i'元素吗？<div>

$(function() {
  var imagesPreview = function(input, placeToInsertImagePreview) {
    if (input.files) {
      var filesAmount = input.files.length;
      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
          $($.parseHTML("<div class='add_photo' data-id=''>")).css("background", "url(" + event.target.result + ")").appendTo(placeToInsertImagePreview);
        }
        console.log(i);
        reader.readAsDataURL(input.files[i]);
      }
    }
  };
  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, '#photo_add_preview');
  });
});
.add_photo {
  width: 100px;
  height: 100px;
  background-size: cover!important;
  background-position: center!important;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="gallery-photo-add">
      <span aria-hidden="true">Загрузить</span>
      <input type="file" multiple id="gallery-photo-add" style="display:none" accept="image/*">
</label>
<div id="photo_add_preview"></div>

javascript

1 个回答

  1. Best Answer

    我不知道有什么问题。您在循环中声明一个变量let并冷静地替换：

    $(function() {
  var imagesPreview = function(input, placeToInsertImagePreview) {
    if (input.files) {
      var filesAmount = input.files.length;
      for (let i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
          $($.parseHTML("<div class='add_photo' data-id='" + i + "'>")).css("background", "url(" + event.target.result + ")").appendTo(placeToInsertImagePreview);
        }
        console.log(i);
        reader.readAsDataURL(input.files[i]);
      }
    }
  };
  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, '#photo_add_preview');
  });
});
    .add_photo {
  width: 100px;
  height: 100px;
  background-size: cover!important;
  background-position: center!important;
  display: inline-block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="gallery-photo-add">
      <span aria-hidden="true">Загрузить</span>
      <input type="file" multiple id="gallery-photo-add" style="display:none" accept="image/*">
</label>
<div id="photo_add_preview"></div>

    • 1

相关问题