Hide image if src is empty
Solution 1
How about using jQuery's attribute selectors?
$(document).ready(function(){
$('.imagen[src=""]').hide();
$('.imagen:not([src=""])').show();
});
Working example here
Solution 2
You can just use CSS for this:
img[src=""] {
display: none;
}
<img src="">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg">
Solution 3
Your logic is flawed.
if ($(".imagen").attr(src="") == "") {
$(".imagen").hide();
}
else {
$(".imagen").show();
}
This will not work, as you've got iterate through each instance of .imagen
$('.imagen').show().filter(function(){
return $(this).attr('src') == '';
}).parents('a').hide();
Above, we show all the .imagen
's, then filter based on their src
attribute, then hide the one's we're left with.
As a side point, you may want to hide the parent <a>
element, rather than the image.
Solution 4
You have wrong syntax for getting value of src by attr()
Change
if ($(".imagen").attr(src="") == "") {
To
$(".imagen").each(function(){
if ($(this).attr("src") == "")
$(this).hide();
else
$(this).show();
});
Solution 5
I am surprised that you don't have some kind of syntax error And you're code is also wrong, because it does not test every instance of .imagen.
Do it like this
$(".imagen[src='']").hide();
![Artur Rain](https://i.stack.imgur.com/fLV3J.png?s=256&g=1)
Comments
-
Artur Rain almost 2 years
I'm trying to hide
<img>
if the source is empty. But I have no luck.I found few posts here, but it doesn't work for me.
Here is my code, it's table based because it will be a template: Images:
<td width="92%" align="center" class="imagenes_desc"> <a href="#" class="showcase"><img class="imagen" src="http://webs.ono.com/norfolk/ebay/images/01.jpg" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> <a href="#" class="showcase"><img class="imagen" src="" width="800"></a> </td>
Here is the Javascript I'm trying to implement.
<script type="text/javascript"> $(document).ready(function(){ if ($(".imagen").attr(src="") == "") { $(".imagen").hide(); } else { $(".imagen").show(); } </script>
I'm not very familiar with JS, I found this script here on Stackoverflow, but I can't get it to work.
Update
Trying this, but doesn't work (Chrome hides well, but Firefox and IE don't):
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript"> $("imagen").each(function(){ if ($(this).attr("src") == "") $(this).hide(); else $(this).show(); }); </script> <style> .hide {display:none !important;} .show {display:block !important;} </style>
Thanks,