Issue
$(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
Solution
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>
Answered By - Carsten Løvbo Andersen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.