更改图片点击的网址

Question

我使用js插入图像数组，并向所有图像添加了相同的类。现在，我想在单击图像时更改url，但是我无法区分图像，有人可以帮忙吗？例如，当单击image1进入差异链接时，单击image2进入另一个链接。 这是下面的代码：

infoArray = [
    {
        "image": "001.jpg",
        "title": "Jordan",
        "text": ["Web Development"],
    },
    {

        "image": "tri.jpg",
        "title": "Last Night",
        "text": ["Web Development"],
    },
    {
        "image": "001.jpg",
        "title": "Chatter",
        "text": ["Web Development", "Web Design"],
    },
]

function insertDiv(array, container) {
    array.forEach(function (e, index) {
        let div = document.createElement("div");
        div.classList.add("box");
        container.appendChild(div);
        insertImages(array, div, index)

    });
}

function insertImages(array, container, index) {
    let img = new Image();
    img.src = array[index]["image"];
    img.classList.add("image");
    container.appendChild(img);

    insertTitle(array, container, index);
}
function insertTitle(array, container, index) {
    let titleContainer = document.createElement("p");
    titleContainer.classList.add("title");
    let title = document.createTextNode(array[index]["title"]);
    titleContainer.appendChild(title);
    container.appendChild(titleContainer);

    insertText(array, container, index);
}

function insertText(array, container, index) {
    let textContainer = document.createElement("div");
    textContainer.classList.add("textContainer");

    array[index]["text"].forEach(function (e, i) {
        let text = document.createElement("p");
        let innerText = document.createTextNode(array[index]["text"][i]);
        text.appendChild(innerText);
        textContainer.appendChild(text);
    })

    container.appendChild(textContainer);
}

function FadeIn(img){
    var ourScene = new ScrollMagic.Scene({
        triggerElement: img,
        triggerHook: 0.7,
        reverse: true,
        duration: "100%",
    })
    .on('start', function(){
        TweenMax.to(img, 1, {opacity: 1, y:10})
    })
    .on('end', function(){
        controllerInfo = controller.info("scrollDirection");
        TweenMax.to(img, 1, {opacity: 0});
        if ( controllerInfo == 'REVERSE'){
            TweenMax.to(img, 1, {opacity: 1});

        }
    })
    .addIndicators()
    .addTo(controller);
}


function checkHovering(images){ //looks if hovering on img
    images.forEach(function(image, index){
        document.addEventListener("mousemove", function(e){
            if(e.x>image.getBoundingClientRect().x
            && e.x<document.documentElement.clientWidth - image.getBoundingClientRect().x
            && e.y>image.getBoundingClientRect().y
            && e.y<image.getBoundingClientRect().y + image.getBoundingClientRect().height){
                TweenMax.to(image, 1, {css: {scale: 1.02}});
                appearTitle(index);
            } else {
                TweenMax.to(image, 0.5, {css: {scale: 1}});
                disappearTitle(index);

            }
        })
    })
}

function appearTitle(index){
    currentTitles[index].style.opacity = 1;
    currentText[index].style.opacity = 1;
}


function disappearTitle(index){
    currentTitles[index].style.opacity = 0;
    currentText[index].style.opacity = 0;
}

function clickImg(images){
    images.forEach(function(image){
      
    })
}


let container = document.querySelector(".container");
let controller = new ScrollMagic.Controller();
insertDiv(infoArray, container);

let currentTitles = document.querySelectorAll(".title");
let currentImages = document.querySelectorAll(".image");
let currentText = document.querySelectorAll(".textContainer");

currentImages.forEach(function(element){
    FadeIn(element);
})
checkHovering(currentImages);