Dynamisch Aktualisieren von divs mit für LOOP

Ich habe versucht, eine for-Schleife zu verwenden, um divs dynamisch zu aktualisieren, aber es scheint ein Problem zu sein. Das erste Mal, dass ich es laufen läuft gut und Chrom-Protokolle ...Dynamisch Aktualisieren von divs mit für 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

aber das zweite Mal, dass ich laufen sie etwas schief geht ...

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

Wie Sie Linie 13-15 Wiederholung sehen und irgendwie, dass Namen alle divs die gleichen, zum Beispiel von product_0 product_1 ... etc ..

Heres der Code:

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

Vielen Dank im Voraus

Quelle

2016-10-17 John James

Sie mehr erklären könnte? Ich verstehe nicht, was daran falsch ist. – RobertAKARobin

ohhhh, ich brauchte die for-Schleife nicht –

Ich könnte das stattdessen getan haben: –

Wie ich schon sagte, ich hätte die for-Schleife weggelassen (nicht notwendig) ... hier ist der eigentliche Code, ich wollte Upload-Previews eindeutige IDs dynamisch geben.

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

und 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>

Quelle

2016-10-17 22:23:35

Dynamisch Aktualisieren von divs mit für LOOP

Antwort

Verwandte Themen