javascript - 如果包含的图像为空，我想隐藏父元素

Question

我有一个表格，其中有一个单元格，其中包含一个用于保存图像的 div。

我想做的是，如果图像本身有一个空的 src 值，或者加载图像时出现错误，然后将父单元格的显示设置为无。

该表格实际上会在页面中列出一系列图像，并非所有图像都是空的或显示错误。

下面的代码显示了表格单元格... {} 中的信息实际上是作为文本文字传递的动态数据值。如果“img src”的值错误或为空，那么我想将 TD 的 ID 显示设置为“无”。

<td style="text-align: center; vertical-align: top; width: 400px;" id="{tag_itemid}">
<div class="image_container">
    <div class="border"> 
        <div class="boxSep">
            <div style="width: 250px; height: 250px; border-radius: 15px;" class="imgLiquidFill imgLiquid imgLiquid_bgSize imgLiquid_ready"> 
                <a title="{tag_name_nolink}" target="_blank" href="{tag_itemurl_nolink}" style="display: block; width: 100%; height: 100%;"> 
                    <img src="{tag_image (small)_value}" /> 
                 </a> 
             </div>
          </div>
    </div>
</div>

我还想处理这样的情况:我的页面上只有一个表，表中有 2 个 iamges，每个表都在一个 div 中，我想为每个 DIV 设置 display=none，因为图像 src 是无效的 URL 或者如果 src =""- 请参见下面的示例

<table style="width: 100%;">
<tbody>
    <tr>
        <td>
        <div class="image_container_no_rollover icg_4" id="hldr1">
            <img src="http://lorempixel.com/400/200/" alt="">
        </div>
        <div id="hldr2" >
            <img style="border: 0px none;" src="http://lorempixel.com/400/250/" alt="">
        </div>
        </td>
    </tr>
</tbody>

Answer 1

方法如下:

$(document).ready(function () {
    $("td").each(function () {
        var $img = $(this).find("img");
        if ($img[0] === undefined) return;

        var td = this;
        $(this).find("img").on("error", function () {
            $(td).css("display", "none");
        });
    });
});

查看:JSFiddle