如果图片高度等于某个特定值，则隐藏该图片。

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>

- Rhys Edwards

Answer 1

使用属性选择器可以实现按特定属性值选择元素。具体使用方法请参考属性值选择器文档。

$('.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不是函数错误。

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

- Tushar

---

谢谢，我没有考虑过那个。非常简明扼要的回答。 - Rhys Edwards

你是否也想添加$('.text img[data-orig-height!="167"]').show()？似乎这会永久隐藏图片，但从不显示它们。 - Spencer

@Spencer 我假设所有的图像都将默认显示，并且使用 hide 可以隐藏它们。但是，如果 OP 想要在某些事件上切换图像，那么这种方法就不适用了。谢谢您的建议，我已经添加了。 - Tushar

Answer 2

这里有三个问题：

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

2 - ===比较不会导致类型强制转换，因此"167" !== 167。

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

尝试以下操作：

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

- Spencer

---

注意：如果有多个图像，您需要使用“each”对它们进行迭代才能使其正常工作。 - Tushar

而且，可以通过使用 toggle() 作为 $('.text img').toggle(hide !== 167); 来避免使用 if ... else。 - Tushar

谢谢，我已经更新了我的答案以处理多个元素。我不确定切换是正确的函数，因为它可能导致元素永久隐藏。 - Spencer

Answer 3

这个：

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

应该是：

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

- Norlihazmey Ghazali

---

注意：如果有多个图像，您需要使用“each”对它们进行迭代才能使其正常工作。 - Tushar