javascript - 如何在具有特定alt属性内容的JS中隐藏图像？

我有一个如下所示的DOM，其中我想隐藏具有特定alt属性内容的图像。

所有这些都在类shows-grid__thumb的li标记内。 alt属性的内容位于A行（2015年投票辩论），B行（2015年特别投票）和C行（2015年电话投票）。

<li class="shows-grid__thumb shows-grid__item">
   <a class="shows-grid__img-link" href="" tabindex="0">
      <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
         <img src="" srcset="" alt="Vote 2015 Debates" data-fallback-img=""> <!-- Line A -->
      </figure>
   </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
   <a class="shows-grid__img-link" href="" tabindex="0">
      <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
         <img src="" srcset="" alt="Vote 2015 Special" data-fallback-img=""> <!-- Line B -->
      </figure>
   </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
   <a class="shows-grid__img-link" href="" tabindex="0">
      <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
         <img src="" srcset="" alt="Vote 2015 Phone-in" data-fallback-img=""> <!-- Line C -->
      </figure>
   </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
   <a class="shows-grid__img-link" href="" tabindex="0">
      <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
         <img src="" srcset="" alt="Vote Reform" data-fallback-img="">
      </figure>
   </a>
</li>

问题陈述：

我想知道我需要添加什么JS代码，以便从DOM /网页中隐藏具有alt属性内容Vote 2015 Debates，Vote 2015 Special和Vote 2015 Phone-in的图像。
我不想隐藏具有alt属性内容Voting Reform的图像。

这是我尝试过的，但还需要做更多。

let el = document.querySelectorAll("li.shows-grid__thumb");

const ext = ["Vote 2015 Debates", "Vote 2015 Phone-in", "Vote 2015 Special"];

el.forEach(el =>

  el.setAttribute("style", "display: none;")
)

最佳答案

您可以使用img[alt='YOUR_STRING']选择器，下面的代码段在单击按钮时给出了所需的结果：

const ext = ["Vote 2015 Debates", "Vote 2015 Phone-in", "Vote 2015 Special"];

ext.forEach(el =>
  document.querySelector("img[alt='" + el + "']").closest('li').setAttribute("style", "display: none;")
);

<li class="shows-grid__thumb shows-grid__item">
  <a class="shows-grid__img-link" href="" tabindex="0">
    <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="" srcset="" alt="Vote 2015 Debates" data-fallback-img="">
      <!-- Line A -->
    </figure>
  </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
  <a class="shows-grid__img-link" href="" tabindex="0">
    <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="" srcset="" alt="Vote 2015 Special" data-fallback-img="">
      <!-- Line B -->
    </figure>
  </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
  <a class="shows-grid__img-link" href="" tabindex="0">
    <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="" srcset="" alt="Vote 2015 Phone-in" data-fallback-img="">
      <!-- Line C -->
    </figure>
  </a>
</li>

<li class="shows-grid__thumb shows-grid__item">
  <a class="shows-grid__img-link" href="" tabindex="0">
    <figure class="shows-grid__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="" srcset="" alt="Vote Reform" data-fallback-img="">
    </figure>
  </a>
</li>

关于javascript - 如何在具有特定alt属性内容的JS中隐藏图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57512356/