向元素添加多个图像的问题（javascript 循环问题）

Question

我想在此代码中将数组中的多张照片添加到元素中，但它只将数组中的一张照片添加到第一个元素中。我尝试添加 for 循环，但我不知道从哪里开始以及从哪里结束循环。您能否使用链接 (codepen) 查看代码？谢谢

let zoomLevel = 1;

const images = [

    {

        thumb: 'http://localhost:8080/links/works/Print/001.webp',

        hires: 'http://localhost:8080/links/works/Print/001.webp'

    },

    {

        thumb: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp',

        hires: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp'

    }

]

// set to random image

let img = images[Math.floor(Math.random() * images.length)];

image.getElementsByTagName('a')[0].setAttribute('href', img.hires);

image.getElementsByTagName('img')[0].setAttribute('src', img.thumb);

const preloadImage = url => {

    let img = new Image();

    img.src = url;

}

preloadImage(img.hires);

const enterImage = function(e) {

    zoom.classList.add('show', 'loading');

    clearTimeout(clearSrc);

    

    let posX, posY, touch = false;

    

    if (e.touches) {

        posX = e.touches[0].clientX;

        posY = e.touches[0].clientY;

        touch = true;

    } else {

        posX = e.clientX;

        posY = e.clientY;

    }

    

您可以使用 Codepen HERE 更好地检查这一点。

Answer 1

&nbsp; const image = document.querySelectorAll('.image');&nbsp; &nbsp; /* Store the number of all elements with css class 'image' */&nbsp; &nbsp; let imageElementsCount = image.length;&nbsp; &nbsp; for (index = 0; index < imageElementsCount; index++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; let arrayElementPos = Math.floor(Math.random() * images.length);&nbsp; &nbsp; &nbsp; &nbsp; /* Receive the requested element from array with image objects */&nbsp; &nbsp; &nbsp; &nbsp; let imageObject = images[arrayElementPos];&nbsp; &nbsp; &nbsp; &nbsp; preloadImage(imageObject.hires);&nbsp; &nbsp; &nbsp; &nbsp; /* Assign received image properties to your html element */&nbsp; &nbsp; &nbsp; &nbsp; image[index].getElementsByTagName('a')[0].setAttribute('href', imageObject.hires);&nbsp; &nbsp; &nbsp; &nbsp; image[index].getElementsByTagName('img')[0].setAttribute('src', imageObject.thumb);&nbsp; &nbsp; &nbsp; &nbsp; image[index].addEventListener('mouseover', enterImage);&nbsp; &nbsp; &nbsp; &nbsp; image[index].addEventListener('touchstart', enterImage);&nbsp; &nbsp; &nbsp; &nbsp; image[index].addEventListener('mouseout', leaveImage);&nbsp; &nbsp; &nbsp; &nbsp; image[index].addEventListener('touchend', leaveImage);&nbsp; &nbsp; &nbsp; &nbsp; image[index].addEventListener('mousemove', move);&nbsp; &nbsp; &nbsp; &nbsp; image[index].addEventListener('touchmove', move);&nbsp; &nbsp; &nbsp; &nbsp; image[index].addEventListener('wheel', e =>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.deltaY > 0 ? zoomLevel-- : zoomLevel++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (zoomLevel < 1) zoomLevel = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (zoomLevel > 5) zoomLevel = 5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(`zoom level: ${zoomLevel}`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; zoom.style.transform = `scale(${zoomLevel})`;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }循环一直有效，直到所有已创建的 div 都得到分配。全部：删除行const image = document.querySelectorAll('.image')[0];[0]。下一步：查看 for 循环的主体。删除原始代码中的代码行

Answer 2

我已经完成了两天的代码编辑工作。:)const zoo = document.querySelectorAll('.zoom');const zooImg = document.querySelectorAll('.zoom-image');const pic = document.querySelectorAll(".image");let clearSrc;let zoomLevel = 1;const digiImgs = [{&nbsp; &nbsp; thumb: 'https://tasvir-graphic.de/links/works/digital/MuZe.webp',&nbsp; &nbsp; hires: 'https://tasvir-graphic.de/links/works/digital/MuZe.webp'&nbsp; },&nbsp; {&nbsp; &nbsp; thumb: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp',&nbsp; &nbsp; hires: 'https://tasvir-graphic.de/links/works/digital/unterwelt.webp'&nbsp; },&nbsp; {&nbsp; &nbsp; thumb: 'https://tasvir-graphic.de/links/works/digital/takeCare.webp',&nbsp; &nbsp; hires: 'https://tasvir-graphic.de/links/works/digital/takeCare.webp'&nbsp; },]// set to random imagefor (var i = 0; i < pic.length; i++) {&nbsp; let img = digiImgs[i];&nbsp; pic[i].getElementsByTagName('a')[0].setAttribute('href', img.hires);&nbsp; pic[i].getElementsByTagName('img')[0].setAttribute('src', img.thumb);&nbsp; const preloadImage = url => {&nbsp; &nbsp; let img = new Image();&nbsp; &nbsp; img.src = url;&nbsp; }&nbsp; preloadImage(img.hires);&nbsp; const enterImage = function (e) {&nbsp; &nbsp; var zoo = this.parentNode.childNodes[3];&nbsp; &nbsp; zoo.classList.add('show', 'loading');&nbsp; &nbsp; clearTimeout(clearSrc);&nbsp; &nbsp; let posX, posY, touch = false;&nbsp; &nbsp; if (e.touches) {&nbsp; &nbsp; &nbsp; posX = e.touches[0].clientX;&nbsp; &nbsp; &nbsp; posY = e.touches[0].clientY;&nbsp; &nbsp; &nbsp; touch = true;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; posX = e.clientX;&nbsp; &nbsp; &nbsp; posY = e.clientY;&nbsp; &nbsp; }&nbsp; &nbsp; touch&nbsp; &nbsp; &nbsp; ?&nbsp; &nbsp; &nbsp; zoo.style.top = `${posY - zoo.offsetHeight / 1.25}px` :&nbsp; &nbsp; &nbsp; zoo.style.top = `${posY - zoo.offsetHeight / 2}px`;&nbsp; &nbsp; &nbsp; zoo.style.left = `${posX - zoo.offsetWidth / 2}px`;&nbsp; &nbsp; let originalImage = this.getElementsByTagName('a')[0].getAttribute('href');&nbsp; &nbsp; var zoImg = this.parentNode.childNodes[3].childNodes[1];&nbsp; &nbsp; zoImg.setAttribute('src', originalImage);&nbsp; &nbsp; // remove the loading class&nbsp; &nbsp; zoImg.onload = function () {&nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; zoo.classList.remove('loading');&nbsp; &nbsp; &nbsp; }, 500);&nbsp; &nbsp; }&nbsp; }&nbsp; const leaveImage = function () {&nbsp; &nbsp; // remove scaling to prevent non-transition&nbsp;&nbsp; &nbsp; var zoImg = this.parentNode.childNodes[3].childNodes[1];&nbsp; &nbsp; var zoo = this.parentNode.childNodes[3];&nbsp; &nbsp; zoo.style.transform = null;&nbsp; &nbsp; zoomLevel = 1;&nbsp; &nbsp; zoo.classList.remove('show');&nbsp; &nbsp; clearSrc = setTimeout(() => {&nbsp; &nbsp; &nbsp; zoImg.setAttribute('src', '');&nbsp; &nbsp; }, 250);&nbsp; }&nbsp; const move = function (e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var zoImg = this.parentNode.childNodes[3].childNodes[1];&nbsp; &nbsp; var zoo = this.parentNode.childNodes[3];&nbsp; &nbsp; let posX, posY, touch = false;&nbsp; &nbsp; if (e.touches) {&nbsp; &nbsp; &nbsp; posX = e.touches[0].clientX;&nbsp; &nbsp; &nbsp; posY = e.touches[0].clientY;&nbsp; &nbsp; &nbsp; touch = true;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; posX = e.clientX;&nbsp; &nbsp; &nbsp; posY = e.clientY;&nbsp; &nbsp; }&nbsp; &nbsp; // move the zoom a little bit up on mobile (because of your fat fingers :<)&nbsp; &nbsp; touch ?&nbsp; &nbsp; &nbsp; zoo.style.top = `${posY - zoo.offsetHeight / 1.25}px` :&nbsp; &nbsp; &nbsp; zoo.style.top = `${posY - zoo.offsetHeight / 2}px`;&nbsp; &nbsp; &nbsp; zoo.style.left = `${posX - zoo.offsetWidth / 2}px`;&nbsp; &nbsp; let percX = (posX - this.offsetLeft) / this.offsetWidth,&nbsp; &nbsp; &nbsp; &nbsp; percY = (posY - this.offsetTop) / this.offsetHeight;&nbsp; &nbsp; let zoomLeft = -percX * zoImg.offsetWidth + (zoo.offsetWidth / 2),&nbsp; &nbsp; &nbsp; &nbsp; zoomTop = -percY * zoImg.offsetHeight + (zoo.offsetHeight / 2);&nbsp; &nbsp; zoImg.style.left = `${zoomLeft}px`;&nbsp; &nbsp; zoImg.style.top = `${zoomTop}px`;&nbsp; }&nbsp; pic[i].addEventListener('mouseover', enterImage);&nbsp; pic[i].addEventListener('touchstart', enterImage);&nbsp; pic[i].addEventListener('mouseout', leaveImage);&nbsp; pic[i].addEventListener('touchend', leaveImage);&nbsp; pic[i].addEventListener('mousemove', move);&nbsp; pic[i].addEventListener('touchmove', move);&nbsp; pic[i].addEventListener('wheel', e => {&nbsp; &nbsp; var zoo = e.target.parentNode.parentNode.parentNode.childNodes[3];&nbsp; &nbsp; console.log(zoo);&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; e.deltaY > 0 ? zoomLevel-- : zoomLevel++;&nbsp; &nbsp; if (zoomLevel < 1) zoomLevel = 1;&nbsp; &nbsp; if (zoomLevel > 3) zoomLevel = 3;&nbsp; &nbsp; console.log(`zoom level: ${zoomLevel}`);&nbsp; &nbsp; zoo.style.transform = `scale(${zoomLevel})`;&nbsp; });}但是触摸有问题。当我使用手机触摸时，照片就像链接一样工作并打开照片。如何使用preventDefault Touch？