Question

<a class="thumbnail-link" href="">
<div id="thumbnail-wrap" class="thumbnail-wrap">
<img width="600" height="360" src="image.jpg">
</div>
</a>

如果有图片，如何显示缩略图链接div？

相反的解决方案是...

<script type="text/javascript">

jQuery(document).ready(function( $ ) {

    $(".thumb-summary").find("img[src='']").parent().hide();

});
</script>

但是，它在页面加载时可见，它隐藏了没有图像的div，看起来很糟糕。我想让它只显示找到的图像，请用jquery方式。

Answer 1

使用CSS最初隐藏所有.thumbnail-wrap的父元素然后显示具有属性值的元素，请使用:not() pseudo-class selector忽略img为空的所有src标签。

CSS：

.thumb-summary .thumbnail-wrap{
   display:none;
}

JQUERY：

jQuery(document).ready(function( $ ) {
    $(".thumb-summary").find("img:not([src=''])").parent().show();
    // or 
    //  $(".thumb-summary .thumbnail-wrap:has(img:not([src='']))").show();
});

仅供参考： ：如果您有权访问后端代码，请根据src将一些类添加到父元素，并为该特定类添加样式（用于隐藏）。 / p>

仅当img src存在时如何显示div？

1 个答案: