javascript - 如果 img 等于某个高度，则隐藏它

Question

我正在使用 tumblr 作为我的 CMS 构建一个小型作品集，我需要在索引页面上有缩略图。如果不对此进行硬编码，实现这一目标的最佳方法似乎是将缩略图嵌入正文中，这样图像就会被拉出，然后通过将 css 更改为“display:none”来匹配它的独特高度，将其隐藏在帖子页面上与其他图像相比。

理论上看起来不错，但目前还行不通。我错过了什么？父 div 类是 .text

<script type="text/javascript">
$(document).ready(function() {
    var hide = $('.text img').data-orig-height();
    if (hide === 167) {
        $('.text img').css('display', 'none');
    } else {
        $('.text img').css('display', 'block');
    }
});
</script>

图片html

<figure class="tmblr-full" data-orig-height="167" data-orig-width="310">
    <img src="http://40.media.tumblr.com/d190030c491be51fd47dd1f4291ae9c3/tumblr_inline_nxblnf7rF61tfshob_400.jpg" data-orig-height="167" data-orig-width="310" width="310" height="167" data-meow="true">
</figure>

Answer 1

使用attribute-value selector

$('.text img[data-orig-height="167"]').hide();

这将选择 .text 元素中具有 data-orig-height 属性值为 167 的所有图像。

$('.text img[data-orig-height!="167"]').show(); // Show the images whose attribute value is not 167

---

在OP代码中，

$('.text img').data-orig-height();

不是有效函数。这将抛出 data-orig-height is not a function 错误。

要获取 data-* 属性值，请使用 data() .