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

Answer 2

有几种方法可以实现这一目标。例如：

$('td').each(function() {
    if($(this).find('img').attr('src') == "your evaluator here"){
        $(this).css('display', 'none');
    }
});

当然，在运行该代码之前，请确保已加载整个DOM。

Answer 3

我发现有人能够为我提供所需的解决方案，您可以通过更简单的示例查看下面两个案例的工作结果。

在回答第一部分时...隐藏所有表格单元格检查每个单元格中的每个图像，如果指定的图像无效或者src =“”

，则隐藏该单元格

$(document).ready(function() {
$("table").find("img").each(function(){
    if(!$(this).attr("src")){
        $(this).closest("td").hide();
    }else{
        var image = new Image(); 
        image.src = $(this).attr("src");
        if (image.width == 0) {
            $(this).closest("td").hide();
        }
    }
});

}）;

检查出来：[JSFiddle]（http://jsfiddle.net/gregt57/wke7pbgm/11/）

Answer 4

在回答我的问题的第二部分...隐藏其子项包含无效图像的任何元素或src =“”

$(function() {
 $("#tbl01").find("img").each(function(){
  if(!$(this).attr("src")){
    $(this).parent().hide();
  }else{
   $(this).load(function(){
    // ... loaded  
   }).error(function(){
    // ... not loaded
    $(this).parent().hide();
   });
  }
 });
});

在 [JSFiddle]

上查看

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

4 个答案: