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

我试图在外部.js文件中使用getElementById来更改img src，因此从一个文件更改我的图像更容易，而不必经过数百个文件如果有更简单的方法，我会很感激，如果有人能帮助我，谢谢它也行不通，我想在这里是我的代码：需要多次使用getElementById来更改图像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"/>

来源

2013-11-23 user3023930

您可以通过ID使用jQuery环路周围img元素。并提供了一些数组中的图像路径。 – agpt

如果你只是想映射值到一个文件名的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()算法中。

来源

2013-11-23 02:57:13 jfriend00

如果您确实需要获取每个项目并重新映射它们的.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; 
}

来源

2013-11-23 03:02:34 beejay

我把这个在我的外部.js中，并将其链接到它不工作的页面，虽然你可以解释它多一点，如果可能的话谢谢我只学习JavaScript另一种方式，我做它的工作，但如果雅没有他们的顺序该页面加载它wounldnt工作 – user3023930

我已经扩展了上面的代码，以包括实际的循环。如果你还没有运气，请检查控制台，并让我知道你得到的错误。我会看看我能做些什么来帮助。 – beejay

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

回答

相关问题