$(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>Si trato de eliminar cualquier valor de src o trato de cambiar la extensión de cualquier archivo, la clase se agrega a ambos elementos de la imagen. ¿Qué esta mal en mi codigo? Por favor ayuda a resolver el problema
Creo que quieres algo como esto:
if (!src || fileExtension != 'jpg' && fileExtension != 'png' && fileExtension != 'svg' && fileExtension != 'jpeg' && fileExtension != 'gif') { $('.image', images).addClass("invalidImage") } Ahora mostrará la imagen, si la extensión está vacía, o si no es jpg,png,svg,jpeg,gif
Manifestación
$(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>