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

Question

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

理论上看起来不错，但目前还行不通。我错过了什么？父级 div class 是 .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

这个：

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

应该是：

$('.text img').data('origHeight');

Answer 2

使用attribute-value selector

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

这将 select .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 error.

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

Answer 3

这里有三个问题：

1 - jQuery 没有 data-orig-height 函数。您可以使用数据功能。

2 - === 比较不会导致类型强制，所以 "167" !== 167.

3 - 调用数据只会 return 第一个元素的数据。您希望单独处理每个元素，这需要 for 循环。

尝试以下操作：

$('.text img').each(function (k, img) {
    var $img = $(img);
    if($img.data('origHeight') == 167) {
        $img.hide();
    } else {
        $img.show();
    }
});

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

Hide img if it equals a certain height

html

javascript

css

jquery

tumblr