时间戳

首页 > 解决方案 > 循环遍历具有相同类的所有 div 并使用 Javascript 隐藏文本

javascript - 循环遍历具有相同类的所有 div 并使用 Javascript 隐藏文本

问题描述

我正在尝试遍历具有相同类的 div，然后在 h2 标记处找到一个特定的单词，这样我就可以识别它并隐藏或显示另一个 div。

这是我的代码：

    <main id="main" class="site-main home-main" role="main">

      <div class="home-product">
       <div class="image-container course-trailer">
        <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
       </div>
       <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
       <div class="product-info-home">
        <div class="teacher-home" id="imparteText">Imparte </div>
        <div class="price-home">
         <span class="original-price">$2000 MXN</span>
        </div>
       </div>
      </div>

      <div class="home-product">
       <div class="image-container course-trailer">
        <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
       </div>
       <h2><a class="titleCourse" href="/">Curso de guíon</a></h2>
       <div class="product-info-home">
        <div class="teacher-home" id="imparteText">Imparte </div>
        <div class="price-home">
         <span class="original-price">$1000 MXN</span>
        </div>
       </div>
      </div>

      <div class="home-product">
       <div class="image-container course-trailer">
        <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
       </div>
       <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
       <div class="product-info-home">
        <div class="teacher-home" id="imparteText">Imparte </div>
        <div class="price-home">
         <span class="original-price">$2000 MXN</span>
        </div>
       </div>
      </div>

    </main>

这是我对识别课程标题和隐藏或显示#imparteText 的验证，但我不知道如何在所有家庭产品类中执行此操作：

      <script type='text/javascript'> 
           var title = document.getElementsByClassName('titleCourse').textContent;
           var imparte = document.getElementById('imparteText');
            if ( title.includes('Pack')){
            imparte.style.display = 'none';
            } else {
            imparte.style.display = 'block';
            }
        </script>

有人知道该怎么做吗？非常感谢！

标签： javascripthtmlloops

解决方案

循环遍历每个.titleCourse元素。

您需要更改imparteText为一个类，以便您可以在每个 DIV 中重复它。

要imparteText在与 相同的 DIV 中查找 DIV titleCourse，请使用.closest()查找包含 DIV，然后.querySelector()查找具有该类的 DIV。

var courses = document.querySelectorAll('.titleCourse')

courses.forEach(course => {
  title = course.textContent;
  var imparte = course.closest(".home-product").querySelector('.imparteText');
  if (title.includes('Pack')) {
    imparte.style.display = 'none';
  } else {
    imparte.style.display = 'block';
  }
});
<main id="main" class="site-main home-main" role="main">

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
    </div>
    <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$2000 MXN</span>
      </div>
    </div>
  </div>

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
    </div>
    <h2><a class="titleCourse" href="/">Curso de guíon</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$1000 MXN</span>
      </div>
    </div>
  </div>

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt=""></a>
    </div>
    <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$2000 MXN</span>
      </div>
    </div>
  </div>

</main>

推荐阅读