如何用JavaScript遍历同class的div，根据h2内容控制元素显隐

问题核心原因 #

• 原有代码直接对getElementsByClassName返回的元素集合取textContent，无法拿到正确的标题文本
• 页面中重复使用id="imparteText"不符合HTML规范，getElementById只会返回页面第一个匹配该ID的元素，因此只能控制单个元素显示隐藏

第一步（可选，建议执行）：修正HTML重复ID问题 #

把所有.home-product内的id="imparteText"修改为class="imparteText"，避免ID唯一冲突，修改后对应部分代码如下：

<div class="teacher-home imparteText">Imparte </div>

如果你不想修改原有HTML结构，也可以直接用class选择器.teacher-home来匹配对应元素，无需调整HTML。

第二步：修改JS代码实现批量控制 #

遍历所有.home-product容器，每个容器内单独判断标题、控制对应元素显示隐藏：

<script type='text/javascript'>
// 获取所有home-product容器
const productList = document.querySelectorAll('.home-product');
// 遍历每个容器单独处理
productList.forEach(product => {
  // 只查询当前容器内的标题元素
  const titleEl = product.querySelector('.titleCourse');
  // 只查询当前容器内的需要控制显隐的元素
  // 如果没改HTML的重复ID，这里把'.imparteText'换成'#imparteText'或者'.teacher-home'也可生效
  const imparteEl = product.querySelector('.imparteText');
  // 判空避免某容器缺少对应元素时报错
  if (!titleEl || !imparteEl) return;
  // 根据标题是否包含Pack控制显隐
  imparteEl.style.display = titleEl.textContent.includes('Pack') ? 'none' : 'block';
});
</script>

内容的提问来源于stack exchange，提问作者Anilú González