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

Hide img if it equals a certain height

本文关键字：隐藏 高度 img 于某个 如果      更新时间：2023-09-26

我正在用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>

使用属性值选择器

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

这将选择具有data-orig-height属性值的.text元素内的所有图像作为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不是函数错误。

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

这里有三个问题：

1-jQuery没有数据原始高度函数。您可以使用数据功能。

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

3-调用数据将只返回第一个元素的数据。您希望单独处理每个元素，这就保证了一个for循环。

尝试以下操作：

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

这：

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

应为：

$('.text img').data('origHeight');
相关文章：