動態更新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

回答

相關問題