如何遍历以下充满图像的目录并将图像添加到我的 HTML 页面

Question

我想使用 javascript 根据图像目录中的文件自动更新我的 index.html 文档。

如果目录包含以下 3 个图像文件“moth_forsale.jpg”、“art_sold.jpg”、“bat_forsale.jpg”，下面是 html 的外观片段。

<a class='gallery-link' target="_blank" href='../images/moth_forsale.jpg'>
  <img src="../images_small/moth_forsale.jpg" class="all forsale">
</a>
<a class='gallery-link' target="_blank" href='../images/art_sold.jpg'>
  <img src="../images_small/art_sold.jpg" class="all forsale">
</a>
<a class='gallery-link' target="_blank" href='../images/bat_forsale.jpg'>
  <img src="../images_small/bat_forsale.jpg" class="all forsale">
</a>

如图所示，除了更新文件路径外，我还需要更新 class，使用“forsale”或“sold”，具体取决于图像名称包含的内容。

Answer 1

尝试这个：

document.querySelectorAll('.gallery-link > img').forEach(img => {
  img.classList.add(img.src.includes('forsale') ? 'forsale' : 'sold');
});

如果需要检查和删除以前的类，可以使用img.classList.remove()方法。

如果您只需要处理 CSS 中的图像，您可以使用部分属性 CSS 选择器：

.gallery-link > img[src*=forsale]

使用它来获取在其src属性中带有forsale字符串的所有图像，以及

.gallery-link > img[src*=sold]

对于sold的图像