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

【问题标题】：Hide img if it equals a certain height如果 img 等于某个高度，则隐藏它
【发布时间】：2015-11-11 04:05:04
【问题描述】：

我正在构建一个以 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>

【问题讨论】：

标签： javascript jquery html css tumblr

【解决方案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()。

【讨论】：

谢谢，没想到。非常简洁的答案。
您还想添加 $('.text img[data-orig-height!="167"]').show() 吗？似乎这可能会永久隐藏图像，但永远不会显示它们。
@Spencer 我假设默认情况下会显示所有图像，使用hide 可以隐藏。但是如果 OP 想要在某些事件上切换图像，那将不起作用。感谢您的建议，已添加。

【解决方案2】：

这里有三个问题：

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

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

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

尝试以下方法：

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

【讨论】：

注意：这将不起作用如果有多个图像，您需要使用each 对其进行迭代。
而且，if ... else 可以通过将toggle() 用作$('.text img').toggle(hide !== 167); 来避免
谢谢，我已经更新了我的答案来处理多个元素。我不确定切换功能是否正确，因为这可能会导致元素被永久隐藏。

【解决方案3】：

这个：

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

应该是：

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

【讨论】：

注意：这将不起作用如果有多个图像，您需要使用 each 对其进行迭代。