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",
    ....
};

然后，创建一个遍历地图数据结构的循环并将它们分配给所有人：

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()算法中。

Answer 2

如果你真的需要获取每个项并重新映射它们的.src属性，我可能只是写一个循环。

var imageMappings = [
    { id: 'item4', src: 'item2.jpg' },
    { id: 'item5', src: 'item62.jpg' },
    { id: 'item6', src: 'item4.jpg' },
    // etc...
]

然后循环遍历数组并绑定映射：

for (var i=0; i < imageMappings.length; i += 1) {
    document.getElementById(imageMappings[i].id).src = imageMappings[i].src;
}

需要多次使用getElementById才能更改图像src

2 个答案: