JavaScript：高效遍历与动态更新多个同类名元素图片教程

let anonce = document.querySelector(".anonce").querySelector(".anonceText").innerHTML;
var img = document.querySelector(".anonceLogo");

// 使用 document.querySelectorAll() 获取所有匹配的元素
// 配合展开运算符 (...) 和数组字面量 [] 将 NodeList 转换为真正的数组，
// 以便可以方便地使用 Array 的原型方法。
let anonceTextElements = [...document.querySelectorAll(".anonceText")];

// 定义要查找的字母（或公司名称）
const logoLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
// 假设图片路径遵循 img/[letter].png 的模式
// 例如：'A' 对应 'img/A.png'

anonceTextElements.forEach((elem) => {
  // ... 在这里处理每个 elem 元素 ...
});

  // 获取元素的文本内容，使用 trim() 移除首尾空白，然后使用 slice() 截取前50个字符
  let text = elem.textContent.trim().slice(0, 50);

  // 使用 Array.prototype.filter() 筛选出在文本中找到的匹配字母
  logoLetters
    .filter((letter) => text.includes(letter))
    // 对于每个匹配到的字母，执行图片更新操作
    .forEach((matchedLetter) => {
      // ... 更新图片逻辑 ...
    });

      elem
        // 向上查找最近的 '.anonce' 父元素
        .closest('.anonce')
        // 在该父元素内部查找 'img' 标签
        .querySelector('img')
        // 使用模板字面量 (template literal) 动态设置 src 属性
        .src = `img/${matchedLetter}.png`;

<div class="anonce">
  <h2>Job 1</h2>
  <div class="anonceBody">
    <img class="anonceLogo">
    <p class="anonceText">
      A
    </p>
  </div>
</div>
<div class="anonce">
  <h2>Job 2</h2>
  <div class="anonceBody">
    <img class="anonceLogo">
    <p class="anonceText">
      B
    </p>
  </div>
</div>
<div class="anonce">
  <h2>Job 3</h2>
  <div class="anonceBody">
    <img class="anonceLogo">
    <p class="anonceText">
      C
    </p>
  </div>
</div>
<div class="anonce">
  <h2>Job 4</h2>
  <div class="anonceBody">
    <img class="anonceLogo">
    <p class="anonceText">
      D
    </p>
  </div>
</div>

const logo_switch = () => {
  // 获取所有具有 '.anonceText' 类的元素，并将其转换为数组
  let anonceTextElements = [...document.querySelectorAll(".anonceText")];

  // 定义要匹配的公司名称或标识符
  const logoLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

  // 遍历每个 anonceText 元素
  anonceTextElements.forEach((elem) => {
    // 提取元素的文本内容，去除首尾空白，并截取前50个字符
    let text = elem.textContent.trim().slice(0, 50);

    // 筛选出在当前文本中匹配到的字母
    logoLetters
      .filter((letter) => text.includes(letter))
      // 对每个匹配到的字母，更新对应的图片
      .forEach((matchedLetter) => {
        elem
          // 向上查找最近的父级 '.anonce' 元素
          .closest('.anonce')
          // 在该父级元素内部查找 'img' 标签
          .querySelector('img')
          // 使用模板字面量设置图片的 src 属性
          .src = `img/${matchedLetter}.png`;
      });
  });
};

// 在页面加载完成后调用函数
document.addEventListener('DOMContentLoaded', logo_switch);
// 如果 HTML body 上有 onload="logo_switch()"，可以移除，推荐使用 DOMContentLoaded