Question

0

122

Views

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

 $(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>

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

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T12:39:14.904Z

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 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>

0

122

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

1 answers

0

Find remote jobs

Andres GPT