javascript - 使这些数组函数更紧凑的任何方法

Question

我是 Javascript 的初学者，正在为初学者做 100 多个 JavaScript 项目，目前在第 9 个，Modal 项目。

因此，我必须做到这一点，当您单击图像时，它会显示您刚刚单击的图像，并且我有 16 个图像要单击，这就是我想出的，它有效，但它是超级的很长，所以我想知道如何使它更紧凑或更高效。

    var images = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
    "images/4.jpg",
    "images/5.jpg",
    "images/6.jpg",
    "images/7.jpg",
    "images/8.jpg",
    "images/9.jpg",
    "images/10.jpg",
    "images/11.jpg",
    "images/12.jpg",
    "images/13.jpg",
    "images/14.jpg",
    "images/15.jpg",
    "images/16.jpg",
];

let i = -1;

var items = document.getElementsByClassName("item-img");

items[0].onclick = function () {
    i = 0;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[1].onclick = function () {
    i = 1;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[2].onclick = function () {
    i = 2;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[3].onclick = function () {
    i = 3;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[4].onclick = function () {
    i = 4;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[5].onclick = function () {
    i = 5;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[6].onclick = function () {
    i = 6;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[7].onclick = function () {
    i = 7;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[8].onclick = function () {
    i = 8;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[9].onclick = function () {
    i = 9;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[10].onclick = function () {
    i = 10;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[11].onclick = function () {
    i = 11;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[12].onclick = function () {
    i = 12;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[13].onclick = function () {
    i = 13;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[14].onclick = function () {
    i = 14;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

items[15].onclick = function () {
    i = 15;
    document.getElementById("zoomed-item-img").style.backgroundImage = "url" + "(" + images[i] + ")";
}

标签： javascript