I need to add a class only to the image element only if the src value is empty or file extension is-CodePudding

 $(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 >
<img loading="lazy" data-object-fit=""  src="/sites/default/files/2021-02/DOVE® PROMISES® Silky Smooth Dark Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">
        
<h2 >
      DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
  </div>
  
<div >
<img loading="lazy" data-object-fit=""  src="/sites/default/files/2021-02/DOVE® PROMISES® Silky Smooth Dark Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">
        
<h2 >
      DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
  </div>

If I try to remove any one src value or try to change the extension of any one file, the class is getting added to both the image element. What is wrong in my code? Please help to solve the issue

CodePudding user response：

I think you want something like this:

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

Now it will show the image, if the extension is empty, or if it's not jpg,png,svg,jpeg,gif

Demo

$(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 >
  <img loading="lazy" data-object-fit=""  src="/sites/default/files/2021-02/DOVE® PROMISES® Silky Smooth Dark Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">

  <h2 >
    DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
</div>

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

  <h2 >
    DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
</div>