向元素添加多个图像的问题（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 imagelet 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

  const image = document.querySelectorAll('.image');

    /* Store the number of all elements with css class 'image' */

    let imageElementsCount = image.length;

    for (index = 0; index < imageElementsCount; index++)

    {

        let arrayElementPos = Math.floor(Math.random() * images.length);

        /* Receive the requested element from array with image objects */

        let imageObject = images[arrayElementPos];

        preloadImage(imageObject.hires);

        /* Assign received image properties to your html element */

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

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

        image[index].addEventListener('mouseover', enterImage);

        image[index].addEventListener('touchstart', enterImage);

        image[index].addEventListener('mouseout', leaveImage);

        image[index].addEventListener('touchend', leaveImage);

        image[index].addEventListener('mousemove', move);

        image[index].addEventListener('touchmove', move);

        image[index].addEventListener('wheel', e =>

        {

            e.preventDefault();

            e.deltaY > 0 ? zoomLevel-- : zoomLevel++;

            if (zoomLevel < 1) zoomLevel = 1;

            if (zoomLevel > 5) zoomLevel = 5;

            console.log(`zoom level: ${zoomLevel}`);

            zoom.style.transform = `scale(${zoomLevel})`;

        });

    }

循环一直有效，直到所有已创建的 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 = [{

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

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

  },

  {

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

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

  },

  {

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

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

  },

]

// set to random image

for (var i = 0; i < pic.length; i++) {

  let img = digiImgs[i];

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

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

  const preloadImage = url => {

    let img = new Image();

    img.src = url;

  }

  preloadImage(img.hires);

  const enterImage = function (e) {

    var zoo = this.parentNode.childNodes[3];

    zoo.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;

    }

    touch

      ?

      zoo.style.top = `${posY - zoo.offsetHeight / 1.25}px` :

      zoo.style.top = `${posY - zoo.offsetHeight / 2}px`;

      zoo.style.left = `${posX - zoo.offsetWidth / 2}px`;

    let originalImage = this.getElementsByTagName('a')[0].getAttribute('href');

    var zoImg = this.parentNode.childNodes[3].childNodes[1];

    zoImg.setAttribute('src', originalImage);

    // remove the loading class

    zoImg.onload = function () {

      setTimeout(() => {

        zoo.classList.remove('loading');

      }, 500);

    }

  }

  const leaveImage = function () {

    // remove scaling to prevent non-transition 

    var zoImg = this.parentNode.childNodes[3].childNodes[1];

    var zoo = this.parentNode.childNodes[3];

    zoo.style.transform = null;

    zoomLevel = 1;

    zoo.classList.remove('show');

    clearSrc = setTimeout(() => {

      zoImg.setAttribute('src', '');

    }, 250);

  }

  const move = function (e) {

    e.preventDefault();

    var zoImg = this.parentNode.childNodes[3].childNodes[1];

    var zoo = this.parentNode.childNodes[3];

    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;

    }

    // move the zoom a little bit up on mobile (because of your fat fingers :<)

    touch ?

      zoo.style.top = `${posY - zoo.offsetHeight / 1.25}px` :

      zoo.style.top = `${posY - zoo.offsetHeight / 2}px`;

      zoo.style.left = `${posX - zoo.offsetWidth / 2}px`;

    let percX = (posX - this.offsetLeft) / this.offsetWidth,

        percY = (posY - this.offsetTop) / this.offsetHeight;

    let zoomLeft = -percX * zoImg.offsetWidth + (zoo.offsetWidth / 2),

        zoomTop = -percY * zoImg.offsetHeight + (zoo.offsetHeight / 2);

    zoImg.style.left = `${zoomLeft}px`;

    zoImg.style.top = `${zoomTop}px`;

  }

  pic[i].addEventListener('mouseover', enterImage);

  pic[i].addEventListener('touchstart', enterImage);

  pic[i].addEventListener('mouseout', leaveImage);

  pic[i].addEventListener('touchend', leaveImage);

  pic[i].addEventListener('mousemove', move);

  pic[i].addEventListener('touchmove', move);

  pic[i].addEventListener('wheel', e => {

    var zoo = e.target.parentNode.parentNode.parentNode.childNodes[3];

    console.log(zoo);

    e.preventDefault();

    e.deltaY > 0 ? zoomLevel-- : zoomLevel++;

    if (zoomLevel < 1) zoomLevel = 1;

    if (zoomLevel > 3) zoomLevel = 3;

    console.log(`zoom level: ${zoomLevel}`);

    zoo.style.transform = `scale(${zoomLevel})`;

  });

}

但是触摸有问题。当我使用手机触摸时，照片就像链接一样工作并打开照片。如何使用preventDefault Touch？