仅当 src 值为空或文件扩展名错误时，我才需要向图像元素添加一个类答案

【问题标题】：I need to add a class only to the image element only if the src value is empty or file extension is wrong仅当 src 值为空或文件扩展名错误时，我才需要向图像元素添加一个类
【发布时间】：2022-01-06 07:13:39
【问题描述】：

 $(document).ready(function() {
                const images = document.querySelectorAll('.header');
                images.forEach(findImageExtension);
                function findImageExtension(images) {
                    var src = images.getElementsByTagName('img')[0].src;
                    var fileExtension = src.split('.').pop();
                    console.log(fileExtension)
                    if (!src || fileExtension != 'jpg' || fileExtension != 'png' || fileExtension != 'svg' || fileExtension != 'jpeg' || fileExtension != 'gif') {
                        $('.image').addClass("invalidImage")
                    }
                }
            })

.image.invalidImage {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<img loading="lazy" data-object-fit="" class="image" src="/sites/default/files/2021-02/DOVE%C2%AE%20PROMISES%C2%AE%20Silky%20Smooth%20Dark%20Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">
        
<h2 class="heading">
      DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
  </div>
  
<div class="header">
<img loading="lazy" data-object-fit="" class="image" src="/sites/default/files/2021-02/DOVE%C2%AE%20PROMISES%C2%AE%20Silky%20Smooth%20Dark%20Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">
        
<h2 class="heading">
      DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
  </div>

如果我尝试删除任何一个 src 值或尝试更改任何一个文件的扩展名，则该类将被添加到两个图像元素中。我的代码有什么问题？请帮忙解决问题

【问题讨论】：

首先我会做$('.image',images).addClass("invalidImage")。其次，if 语句很可能总是为真。
是否有任何替代条件可以实现来检查哪个图像标签是否无效并仅向该特定标签添加类

标签： javascript html jquery css

【解决方案1】：

我想你想要这样的东西：

if (!src || fileExtension != 'jpg' && fileExtension != 'png' && fileExtension != 'svg' && fileExtension != 'jpeg' && fileExtension != 'gif') {
  $('.image', images).addClass("invalidImage")
}

现在它将显示图像，如果扩展名是空的，或者不是jpg,png,svg,jpeg,gif

演示

$(document).ready(function() {
  const images = document.querySelectorAll('.header');
  images.forEach(findImageExtension);

  function findImageExtension(images) {
    var src = images.getElementsByTagName('img')[0].src;
    var fileExtension = src.split('.').pop();
    console.log(fileExtension)
    if (!src || fileExtension != 'jpg' && fileExtension != 'png' && fileExtension != 'svg' && fileExtension != 'jpeg' && fileExtension != 'gif') {
      $('.image', images).addClass("invalidImage")
    }
  }
})

.image.invalidImage {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <img loading="lazy" data-object-fit="" class="image" src="/sites/default/files/2021-02/DOVE%C2%AE%20PROMISES%C2%AE%20Silky%20Smooth%20Dark%20Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">

  <h2 class="heading">
    DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
</div>

<div class="header">
  <img loading="lazy" data-object-fit="" class="image" src="/sites/default/files/2021-02/DOVE%C2%AE%20PROMISES%C2%AE%20Silky%20Smooth%20Dark%20Chocolate.bit" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">

  <h2 class="heading">
    DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
</div>

【讨论】：

谢谢@Carsten。有效。这是我所期望的