javascript - 需要多次使用 getElementById 来更改图像 src

Question

我正在尝试在外部 .js 文件中使用 getElementById 来更改 img src，这样就可以更轻松地从一个文件更改图像，而不必遍历数百个文件我正在链接来自不同直销网站的图像的文件，如果有更简单的方法可以做到这一点，如果有人可以帮助我，我将不胜感激，谢谢，它也无法按照我希望的方式工作，这是我的代码:

JavaScript:

document.getElementById("item4").src = "item2.jpg"
document.getElementById("item5").src = "item62.jpg"
document.getElementById("item6").src = "item4.jpg"
document.getElementById("item7").src = "item5.jpg";
document.getElementById("item8").src = "item6.jpg";
document.getElementById("item9").src = "item3.jpg";
document.getElementById("item10").src = "item43.jpg";
document.getElementById("item11").src = "item43.jpg";
document.getElementById("item12").src = "item43.jpg";
document.getElementById("item13").src = "item43.jpg";

HTML:

<img class="images" id="item2" src="" alt="dress"/>

Answer 1

如果您只想将 id 值映射到文件名，您可以制作两者的映射:

var data = {
    item4: "item2.jpg",
    item5: "item62.jpg",
    item6: "item4.jpg",
    item7: "item5.jpg",
    ....
};

然后创建一个循环，遍历 map 数据结构并将它们全部分配:

for (var id in data) {
    document.getElementById(id).src = data[id];
}

一般来说，将更多的内容放在数据结构中而不是放在代码中会更简单，更容易维护和调试。

<小时/>

如果您的 HTML 中有所有这些图像标记，您还可以将文件名放在每个图像标记的自定义属性上。

<img id="item4" class="altImg" src="whatever.jpg" data-alternate="item2.jpg">

然后，您可以像这样切换所有项目:

function switchImages() {
    var imgs = document.getElementsByClassName("altImg");
    var alternateSrc;
    for (var i = 0; i < imgs.length; i++) {
        alternativeSrc = imgs[i].getAttribute("data-alternate");
        if (alternativeSrc) {
            imgs[i].src = alternativeSrc;
        }
    }
}

此函数将自动对具有正确类名和适当自定义属性的任何图像进行操作，并忽略任何没有这些属性的图像。

这种类型代码的优点是 HTML 是您需要的唯一数据结构。只需添加一个新图像，为其指定正确的类和正确的自定义属性，它就会自动包含在 switchImages() 算法中。