Question

标题已经说明了一点。我正在获取包含链接和图像的文档列表：

<img class="Thumbnail" src="sourcetothepdfimage.png" id="/path/pdf.png"/>

可能仅有的两件事是src和id。我现在尝试达到的目标是根据图像ID替换图像src。该ID可能是/path/pdf.png或/path/word.png或完全不同的名称（我尚不知道）。

什么是实现此目标的推荐方法？我有三张不同的图像用于替换（一张用于PDF，一张用于Word文件，另一张用于所有其他未知文件类型）。我认为document.getElementByID没什么意义，因为我只知道两个修订ID。这样，我可以更改PDF和DOCX的src，但不能更改其他任何内容，对吧？因此，document.getElementsByClassName将是有针对性的解决方案，但是我该如何使用“缩略图”类遍历列出的所有五个或更多元素呢？

我对开发人员世界并不陌生，喜欢学习它。

Answer 1

使用jQuery很简单。

// get all img's using class selector
// and use `attr()` method with callback which iterate internally
// within the callback return the id( within callback this refers to the current element DOM object)
$('.Thumbnail').attr('src',function(){
   return this.id
})

<img class="Thumbnail" src="sourcetothepdfimage.png" id="/path/pdf.png"/>

Answer 2

尝试（无jquery）

[...document.querySelectorAll('.Thumbnail')].map(img=> img.src=img.id);

console.log([...document.querySelectorAll('img')]);

<img class="Thumbnail" src="sourcetothepdfimage.png" id="/path/pdf.png"/>
<img class="Thumbnail" src="sourcetothesomimage.png" id="/path/pdf2.png"/>
<img class="Thumbnail" src="sourcetothedocimage.png" id="/path/doc.docx"/>

根据其ID更改图像源

2 个答案: