动态更新div使用LOOP

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

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

在此先感谢

来源

2016-10-17 John James

你能解释一下吗？我不明白这是什么问题。 – RobertAKARobin

ohhhh，我不需要for循环 –

我可以这样做，而不是： –

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

来源

2016-10-17 22:23:35

动态更新div使用LOOP

回答

相关问题