Question

我正在使用tumblr构建一个小型投资组合作为我的CMS，我需要在索引页面上添加缩略图。如果不对此进行硬编码，实现这一目标的最佳方法似乎是将缩略图嵌入到正文中，以便将图像拉过来然后通过将css更改为“display：none＆＃39;”将其隐藏在帖子页面上。通过匹配它与其他图像相比的独特高度。

理论上似乎很棒，但目前还没有工作。我错过了什么？父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并不是函数错误。

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

Answer 2

这里有三个问题：

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

2 - ===比较不会导致类型强制，所以“167”！== 167。

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

尝试以下方法：

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

Answer 3

这：

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

应该是：

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

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

3 个答案: