如何遍歷以下充滿圖像的目錄並將圖像添加到我的 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的圖像