Javascript 使用for循环动态更新div

我一直在尝试使用for循环来动态更新div，但似乎出现了一个问题。第一次运行时，它运行良好，chrome日志

 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);
    }

var clss=document.getElementsByClassName（'thumbnail'）；
var clssLength=clss.length；
log（'class length='+clssLength）；
var uniqueId=“产品长度”+clssLength；
console.log（'testing uniqueId->'+uniqueId）；
对于（var j=0；j'+j）；
}

---

提前感谢

正如我刚才所说，我应该省略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);

函数updateImage ID（）{
var clss=document.getElementsByClassName（“缩略图”）；
var clssLength=clss.length；
var idFix=clssLength-1；
log（'class length='+clssLength）；
var uniqueId=“产品长度”+clssLength；
console.log（'testing uniqueId->'+uniqueId）；
log（'addinguniqueid'+uniqueID+'to class'）；
clss[idFix].setAttribute（'id'，uniqueId）；
log（'将类中的图像编号更新为'+clssLength'）；
}
函数预览图像（文件）{
var galleryId=“画廊”；
var gallery=document.getElementById（galleryId）；
var imageType=/image.*/；
如果（！file.type.match（imageType））{
抛出“文件类型必须是图像”；
}
var thumb=document.createElement（“div”）；
thumb.classList.add（'thumbnail'）；
var img=document.createElement（“img”）；
img.file=文件；
拇指附属物（img）；
附肢儿童（拇指）；
//使用FileReader显示图像内容
var reader=new FileReader（）
reader.onload=（函数（aImg）{返回函数（e）{aImg.src=e.target.result；}；}）（img）；
reader.readAsDataURL（文件）；
}
var uploadfiles=document.querySelector（“#fileinput”）；
uploadfiles.addEventListener（'change'，函数（）{
var files=this.files；
对于（var i=0；i
正如我所说的，我应该省略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);

函数updateImage ID（）{
var clss=document.getElementsByClassName（“缩略图”）；
var clssLength=clss.length；
var idFix=clssLength-1；
log（'class length='+clssLength）；
var uniqueId=“产品长度”+clssLength；
console.log（'testing uniqueId->'+uniqueId）；
log（'addinguniqueid'+uniqueID+'to class'）；
clss[idFix].setAttribute（'id'，uniqueId）；
log（'将类中的图像编号更新为'+clssLength'）；
}
函数预览图像（文件）{
var galleryId=“画廊”；
var gallery=document.getElementById（galleryId）；
var imageType=/image.*/；
如果（！file.type.match（imageType））{
抛出“文件类型必须是图像”；
}
var thumb=document.createElement（“div”）；
thumb.classList.add（'thumbnail'）；
var img=document.createElement（“img”）；
img.file=文件；
拇指附属物（img）；
附肢儿童（拇指）；
//使用FileReader显示图像内容
var reader=new FileReader（）
reader.onload=（函数（aImg）{返回函数（e）{aImg.src=e.target.result；}；}）（img）；
reader.readAsDataURL（文件）；
}
var uploadfiles=document.querySelector（“#fileinput”）；
uploadfiles.addEventListener（'change'，函数（）{
var files=this.files；
对于（var i=0；i
你能再解释一下吗？我不明白这有什么错。哦，我不需要for loop，我可以这样做：你能再解释一下吗？我不明白这有什么错。哦，我不需要for loop，我可以这样做：