我试图用一个portfolio.Img类来查找每个图像的高度,然后将它应用到一个类为.Img的兄弟div上.overlay
。如果该高度小于 500,则不显示具有 page_categories 的 id 和.entry
.
这有效,但仅适用于一个图像,而不是页面上的所有图像:
<script>
$(document).ready(function () {
$('img.portfolioImg').load(function() {
var imgHeight = $('img.portfolioImg').height();
$('.overlay').css('height', imgHeight - 40 + 'px');
if ( $('.overlay').height() < 500 ) {
$('#page_categories').css('display', 'none');
$('.entry').css('display', 'none');
}else{
// do nothing
}
});
});
</script>
<div class="ct-coll-item col2 masonry-brick">
<article>
<img class="portfolioImg" src="_/img/13.png" />
<div class="overlay">
<div id="page_categories">
<a href="#">Publication</a>, <a href="#">Typeface</a>
</div>
<h2><a href="#">Adam Howe Styles Men of Alaska for Port Magazine</a></h2>
<div class="entry">
<p>An experimental typographic project by Riccardo Sabatini, which is a typeface inspired by old mechanics technical drawings, the steampunk visual world, and modern machinery.</p>
</div>
<footer class="postmetadata">
<time>July 23rd, 2012</time> / <a href="#">1 Comment</a>
</footer>
</div>
</article>
</div>
这div.ct-coll-item
重复了很多次,我不知道如何申请.each()
使其适用于所有图像和兄弟姐妹/孩子。