Question

我一直在尝试使用for循环来动态更新div，但似乎存在问题。我第一次运行它运行正常和铬日志......

 gallery.js:9                       class length = 1
 gallery.js:11                      testing uniqueId-> product_1
 gallery.js:13                      adding uniqueID product_1 to class
 gallery.js:15                      j is -->0
 gallery.js:17                      updated n.o of images in the class to 1

但是第二次我运行它出了问题......

 gallery.js:9                       class length = 2
 gallery.js:11                      testing uniqueId-> product_2
 gallery.js:13                      adding uniqueID product_2 to class
 gallery.js:15                      j is -->0
 gallery.js:13                      adding uniqueID product_2 to class
 gallery.js:15                      j is -->1
 gallery.js:17                      updated n.o of images in the class to 2

正如你可以看到第13-15行重复并以某种方式，将所有div命名为相同，例如从product_0到product_1 ......等等。

下面是代码：

    var clss = document.getElementsByClassName('thumbnail');
    var clssLength = clss.length;
    console.log('class length = ' + clssLength);
    var uniqueId = "product_" + clssLength;
    console.log('testing uniqueId-> ' + uniqueId);
    for (var j = 0; j < clss.length; j++) {
        clss[j].setAttribute('id', uniqueId);
        console.log('j is -->' + j);
    }

提前致谢

Answer 1

正如我所说，我应该省略for循环（不是必需的）......这是实际代码，我想动态地为上传预览提供唯一ID。

function updateImageId () {
    var clss = document.getElementsByClassName('thumbnail');
    var clssLength = clss.length;
    var idFix = clssLength - 1;
    console.log('class length = ' + clssLength);
    var uniqueId = "product_" + clssLength;
    console.log('testing uniqueId-> ' + uniqueId);
    console.log('adding uniqueID '+uniqueId+' to class');
    clss[idFix].setAttribute('id', uniqueId);
    console.log('updated n.o of images in the class to ' + clssLength);

}

function previewImage(file) {
    var galleryId = "gallery";

    var gallery = document.getElementById(galleryId);
    var imageType = /image.*/;

    if (!file.type.match(imageType)) {
        throw "File Type must be an image";
    }

    var thumb = document.createElement("div");
    thumb.classList.add('thumbnail');



    var img = document.createElement("img");
    img.file = file;
    thumb.appendChild(img);
    gallery.appendChild(thumb);


    // Using FileReader to display the image content
    var reader = new FileReader()
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
}

var uploadfiles = document.querySelector('#fileinput');
uploadfiles.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length; i++){
        previewImage(this.files[i]);
        setTimeout(updateImageId, 500);
    }
}, false);

和html：

  <head>
  <meta charset="UTF-8">
  <title>Preview images</title>
  <style>
    #gallery .thumbnail{
        width:150px;
        height: 150px;
        float:left;
        margin:2px;
    }
    #gallery .thumbnail img{
        width:150px;
        height
  </style>
  </head>
  <body>
  <h2>Upload images ...</h2>

  <input type="file" id="fileinput" multiple="multiple" accept="image/*" />

  <div id="gallery">
     <!--div class = "thumbnail" id='product_1' will appear-->
  </div>
  </body>

使用LOOP动态更新div

1 个答案: