我一直在尝试使用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);
}
提前致谢
最佳答案
就像我说的那样,我应该省略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>