jQuery 如果 src 为空，则隐藏图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15922344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide image if src is empty
提问by Artur Rain
I'm trying to hide <img>if the source is empty. But I have no luck.
我试图隐藏<img>源是否为空。但我没有运气。
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.
这是我正在尝试实现的 Javascript。
<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.
我对 JS 不是很熟悉，我在 Stackoverflow 上找到了这个脚本，但我无法让它工作。
Update
更新
Trying this, but doesn't work (Chrome hides well, but Firefox and IE don't):
尝试这个，但不起作用（Chrome 隐藏得很好，但 Firefox 和 IE 没有）：
<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,
谢谢，
回答by Max Bates
You can just use CSS for this:
您可以为此使用 CSS：
img[src=""] {
display: none;
}<img src="">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg">回答by ahren
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
$('.imagen').show().filter(function(){
return $(this).attr('src') == '';
}).parents('a').hide();
Above, we show all the .imagen's, then filter based on their srcattribute, then hide the one's we're left with.
上面，我们显示了所有.imagen的 ，然后根据它们的src属性进行过滤，然后隐藏剩下的那个。
As a side point, you may want to hide the parent <a>element, rather than the image.
作为一个侧面，您可能希望隐藏父<a>元素，而不是图像。
回答by user2264587
How about using jQuery's attribute selectors?
如何使用jQuery 的属性选择器？
$(document).ready(function(){
$('.imagen[src=""]').hide();
$('.imagen:not([src=""])').show();
});
Working example here
回答by Adil
You have wrong syntax for getting value of src by attr()
您通过 attr() 获取 src 值的语法错误
Change
改变
if ($(".imagen").attr(src="") == "") {
To
到
$(".imagen").each(function(){
if ($(this).attr("src") == "")
$(this).hide();
else
$(this).show();
});
回答by elrado
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.
我很惊讶你没有某种语法错误而且你的代码也是错误的，因为它没有测试 .imagen 的每个实例。
Do it like this
像这样做
$(".imagen[src='']").hide();
回答by Headache
In your stylesheet make add the following code to define a "hidden" class:
在您的样式表中，添加以下代码来定义一个“隐藏”类：
.hidden {
display: none;
}
Then add the following javascript code:
然后添加以下javascript代码：
$(document).ready(function() {
$(".imgagen").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidden");
} else {
$(this).removeClass("hidden");
}
});
});
回答by Headache
Just put space inside alt tag.Here is working code
只需在 alt 标签内放置空间即可。这是工作代码
<img class="imagen" src="" width="800" alt" ">
回答by comeGetSome
test for src attribute if its null, but anyway - if you hide images what happens to the wrapping A elements? Rather, dont generate A/IMG elements for those not having any image.
测试 src 属性是否为空，但无论如何 - 如果隐藏图像，包装 A 元素会发生什么？相反，不要为那些没有任何图像的人生成 A/IMG 元素。
回答by Jo9876
Your code that you have posted should work but make sure that u have added the jquery library files on the header of ur html page .
您发布的代码应该可以工作，但请确保您已在 html 页面的标题上添加了 jquery 库文件。
go to jquery site and then download the js file. then add the following line on HTML page section head :
转到 jquery 站点，然后下载 js 文件。然后在 HTML 页面部分头部添加以下行：
