如果 src 为空，则隐藏图像答案

【问题标题】：Hide image if src is empty如果 src 为空，则隐藏图像
【发布时间】：2013-04-02 02:06:02
【问题描述】：

如果源为空，我会尝试隐藏 <img>。但我没有运气。

我在这里找到了一些帖子，但它对我不起作用。

这是我的代码，它是基于表格的，因为它将是一个模板：图片：

<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>

这是我正在尝试实现的 Javascript。

<script type="text/javascript">
        $(document).ready(function(){
            if ($(".imagen").attr(src="") == "") {
                $(".imagen").hide();
            }
            else {
                $(".imagen").show();
            }
</script>

我对 JS 不是很熟悉，我在 Stackoverflow 上找到了这个脚本，但我无法让它工作。

更新

尝试这个，但不起作用（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>

谢谢，

【问题讨论】：

标签： javascript jquery image hide

【解决方案1】：

只需在 alt 标记内添加空格即可。这是工作代码

 <img class="imagen" src="" width="800" alt" ">

【讨论】：

【解决方案2】：

在您的样式表中添加以下代码来定义一个“隐藏”类：

 .hidden {
    display: none;
}

然后添加以下javascript代码：

$(document).ready(function() {
   $(".imgagen").each(function() {
        var atr = $(this).attr("src"); 
        if(atr == "") {
            $(this).addClass("hidden");
        } else {
            $(this).removeClass("hidden");
        }
    });
});

【讨论】：

【解决方案3】：

您可以为此使用 CSS：

img[src=""] {
    display: none;
}

<img src="">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg">

【讨论】：

最佳和最简单的答案在这里。干得好
太好了。在 Angular 中，当与 [src] = "image.data" 一起使用时，image.data 可能为空。您必须通过在您的 css 中放置 img[src="null"] 或可比较的来尊重这一点。

【解决方案4】：

用jQuery's attribute selectors怎么样？

    $(document).ready(function(){
        $('.imagen[src=""]').hide();
        $('.imagen:not([src=""])').show();
    });

工作example here

【讨论】：

明智地使用了选择器：D

【解决方案5】：

你的逻辑有缺陷。

if ($(".imagen").attr(src="") == "") {
  $(".imagen").hide();
}
else {
  $(".imagen").show();
}

这不起作用，因为您已经遍历了 .imagen 的每个实例

$('.imagen').show().filter(function(){
  return $(this).attr('src') == '';
}).parents('a').hide();

在上面，我们显示所有.imagen，然后根据它们的src 属性进行过滤，然后隐藏我们剩下的那个。

顺便说一句，您可能希望隐藏父 <a> 元素，而不是图像。

【讨论】：

尝试了您的解决方案，但没有奏效。如何隐藏父？
@ArturasStrazdas - 我可以向你保证，上述方法可行。您可以使用.parents()（如上所述）选择父元素。

【解决方案6】：

您发布的代码应该可以工作，但请确保您已在您的 html 页面的标题上添加了 jquery 库文件。

转到 jquery 站点，然后下载 js 文件。然后在 HTML 页面部分头部添加以下行：

【讨论】：

谢谢，我修改了，没问题:)
请不要投反对票，这可能是他提到的愚蠢错误。

【解决方案7】：

测试 src 属性是否为空，但无论如何 - 如果隐藏图像，包装 A 元素会发生什么情况？相反，不要为那些没有任何图像的人生成 A/IMG 元素。

【讨论】：

【解决方案8】：

通过 attr() 获取 src 值的语法错误

改变

if ($(".imagen").attr(src="") == "") {

到

$(".imagen").each(function(){     
  if ($(this).attr("src") == "") 
       $(this).hide();
  else           
      $(this).show();
});

【讨论】：

仍然无法按预期工作，因为有多个.imagens

【解决方案9】：

我很惊讶您没有出现某种语法错误而且您的代码也是错误的，因为它没有测试 .imagen 的每个实例。

这样做

$(".imagen[src='']").hide();

【讨论】：