Question

所以我在博客/网站上工作，带有8个图像轮廓的图像轮播。我使用带有CouchCMS的Owl Carousel（这不应该太重要）..

这是旋转木马的样子：

<div id="owl-demo" class="owl-carousel">
     <div class="item"><img src="<cms:show blog_image />" class="carousel_image"></div>
     <div class="item"><img src="<cms:show image_2 />"></div>
     <div class="item"><img src="<cms:show image_3 />"></div>
     <div class="item"><img src="<cms:show image_4 />"></div>
     <div class="item"><img src="<cms:show image_5 />"></div>
     <div class="item"><img src="<cms:show image_6 />"></div>
     <div class="item"><img src="<cms:show image_7 />"></div>
     <div class="item"><img src="<cms:show image_8 />"></div>
</div>

现在我有了它，所以你可以使用CouchCMS上传最多8张图像。

如果您上传的图片少于8张，则其余图片仅显示为损坏的图片。

现在我使用下面的代码来隐藏破碎的图像，这当然会留下一个空白的div（虽然仍然比显示破损的图像更好）...这是我最好的解决方案可以想出来。

$("img").error(function(){
   $(this).hide();
});

有人知道我是否可以检测到图像是否被破坏，并隐藏包含图像的整个div？

感谢。

以下是我尝试过的示例，但它没有效果。

HTML

<div class="item" id="img-8-div"><img src="<cms:show image_8 />"></div>

这里是JQuery，再次没有用。

$("#img-8-div").children('img').error(function(){
   $(this).hide();
});

Answer 1

Demo Fiddle

使用jQuery parent()

$("img").error(function(){
   $(this).parent().hide();
});

隐藏包含损坏图像的div

1 个答案:

Demo Fiddle