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

Question

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

都在classshows-grid__thumb的li标签内。 alt属性内容在A行（2015年投票辩论）、B行（2015年特别投票）和C行（投票 2015 Phone-in).

<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/webpage 中具有 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;")
)

Answer 1

您可以使用 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>

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

How to hide an image in JS having specific alt attribute content?

html

javascript

attr