Question

0

121

Vistas

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 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

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

121

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

1 Respuestas

0

Encuentra empleos remotos

Andres GPT