向元素添加多个图像时出现问题（javascript循环问题）_Javascript

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

javascript

向元素添加多个图像时出现问题（javascript循环问题）,javascript,Javascript,我想在这段代码中将数组中的多张照片添加到元素中，但它只将数组中的一张照片添加到第一个元素中。我尝试添加for循环，但我不知道从哪里开始，从哪里结束循环。你能用这个链接看一下代码吗？多谢各位 let zoomLevel = 1; const images = [ { thumb: 'http://localhost:8080/links/works/Print/001.webp', hires: 'http://localhost:8080/links

我想在这段代码中将数组中的多张照片添加到元素中，但它只将数组中的一张照片添加到第一个元素中。我尝试添加for循环，但我不知道从哪里开始，从哪里结束循环。你能用这个链接看一下代码吗？多谢各位

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

[0]

下一步：查看for循环的主体。删除原始代码中的代码行

谢谢@Reporter，但我已经准备好编辑我的代码两天了。：）

constzoo=document.querySelectorAll（'.zoom'）；
const zooImg=document.querySelectorAll（'.zoom image'）；
const pic=document.queryselectoral（“.image”）；
让我们来看看RC；
设zoomLevel=1；
常数digiImgs=[{
拇指：'https://tasvir-graphic.de/links/works/digital/MuZe.webp',
雇用：'https://tasvir-graphic.de/links/works/digital/MuZe.webp'
},
{
拇指：'https://tasvir-graphic.de/links/works/digital/unterwelt.webp',
雇用：'https://tasvir-graphic.de/links/works/digital/unterwelt.webp'
},
{
拇指：'https://tasvir-graphic.de/links/works/digital/takeCare.webp',
雇用：'https://tasvir-graphic.de/links/works/digital/takeCare.webp'
},
]
//设置为随机图像
对于（变量i=0；i{
设img=新图像（）；
img.src=url；
}
预加载图像（img.hires）；
常量enterImage=函数（e）{
var zoo=this.parentNode.childNodes[3]；
zoo.classList.add（'show'，'loading'）；
clearTimeout（ClearRC）；
设posX，posY，touch=false；
如果（如图所示）{
posX=e.touchs[0].clientX；
posY=e.touchs[0].clientY；
触摸=真实；
}否则{
posX=e.clientX；
posY=e.clientY；
}
触摸
?
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`；
让originalImage=this.getElementsByTagName（'a'）[0].getAttribute（'href'）；
var zoImg=this.parentNode.childNodes[3].childNodes[1]；
setAttribute（'src'，originalImage）；
//删除加载类
zoImg.onload=函数（）{
设置超时（（）=>{
zoo.classList.remove（'load'）；
}, 500);
}
}
const leaveImage=函数（）{
//删除缩放以防止不转换
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（（）=>{
setAttribute（'src'，''）；
}, 250);
}
常量移动=函数（e）{
e、 预防默认值（）；
var zoImg=this.parentNode.childNodes[3].childNodes[1]；
var zoo=this.parentNode.childNodes[3]；
设posX，posY，touch=false；
如果（如图所示）{
posX=e.touchs[0].clientX；
posY=e.touchs[0].clientY；
触摸=真实；
}否则{
posX=e.clientX；
posY=e.clientY；
}
//在手机上稍微向上移动缩放（因为你的胖手指：{
var zoo=e.target.parentNode.parentNode.parentNode.childNodes[3]；
控制台日志（动物园）；
e、 预防默认值（）；
e、 deltaY>0？zoomLevel--：zoomLevel++；
如果（zoomLevel<1）zoomLevel=1；
如果（zoomLevel>3）zoomLevel=3；
log（`zoom level:${zoomLevel}`）；
zoo.style.transform=`scale（${zoomLevel}）`；
});
}

但是触摸有一个问题。当我使用移动设备触摸时，照片就像一个链接，并打开照片。如何使用默认触摸？

如果您将问题简化为问题的本质，您可能会更快得到更好的答案。@BenAston此代码将数组中的一个图像添加到类的第一个元素，即如何添加所有元素从数组到html的所有元素的图像？你不明白什么？你的意思是我需要减少代码吗？谢谢，正常情况下，事件与第一个图像一起工作，但是一旦我添加循环来添加图像，图像就会被添加，但事件不再工作。我的意思是鼠标悬停，缩放…事件。正如你在我使用codepen的代码中所看到的，有两个空白元素，你能让它们工作吗？这是原始代码：我只想在页面上添加更多照片。@哈米德我发现代码中有一个错误，我添加了事件列表的分配。根据代码笔，它可以工作。你能检查我答案中的代码吗？为什么当我重画照片时，它会打开图片而不是缩放？我的意思是如何防止默认（）tauch函数？首先：这实际上不是一个答案，这是另一个问题。第二：尝试

返回false；

，将其添加到href属性的末尾，因此不应执行链接。

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

const image = document.querySelectorAll('.image')[0];

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