需要多次使用 getElementById 来更改图像 src [英] need to use getElementById many times to change image src

问题描述

我正在尝试在外部 .js 文件中使用 getElementById 来更改 img src 以便更轻松地从一个文件更改我的图像，而不必经过数百个我正在链接来自不同直销网站的图像，如果有更简单的方法，我将不胜感激，如果有人可以帮助我，谢谢它也不能像我想要的那样工作，这是我的代码:

I'm trying to use getElementById in external .js file to change img src so it's easier to change my images from one file instead of having to go through hundreds of files I'm linking images from different dropshipping websites if there is an easier way of doing this I would be grateful if someone could help me thanks it also doesn't work the way I'd like here is my code:

JavaScript:

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"/>

推荐答案

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

If you just want to map an id value to a filename, you can make a map of the two:

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

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

And, then make a loop that goes through them the map data structure and assigns them all:

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

一般来说，在数据结构中多放一点，在代码中少放一点会更简单，也更容易维护和调试.

In general, putting more of this in a data structure and less in code is simpler and easier to maintain and debug.

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

If you have all these image tags in your HTML, you could also put the filename on a custom attribute for each image tag.

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

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

Then, you could just switch all items like this:

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

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

This function would automatically operate on any image with the right class name and the appropriate custom attribute and ignore any images without those properties.

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

The advantage of this type of code is that the HTML is the only data structure you need. Just add a new image, give it the right class and the right custom property and it's automatically included in the switchImages() algorithm.

这篇关于需要多次使用 getElementById 来更改图像 src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！