jQuery更改每个元素的功能答案

【问题标题】：jQuery change function to each elementjQuery更改每个元素的功能
【发布时间】：2012-07-24 22:03:28
【问题描述】：

我正在尝试使用类portfolio.Img 查找每个图像的高度，然后将其应用于类为.overlay 的兄弟div。如果该高度小于 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() 使其适用于所有图像和兄弟姐妹/孩子。

【问题讨论】：

标签： jquery css image each

【解决方案1】：

可能你想要这个：

$('img.portfolioImg').bind('load',function() {
    var imgHeight = $(this).height();
    var $overlay = $(this).siblings('.overlay');
    $overlay.css('height', imgHeight - 40 + 'px');
    if ( $overlay.height() < 500 ) {
        $('#page_categories',$overlay).css('display', 'none');
        //                    ^---------- selector context
        $('.entry',$overlay).css('display', 'none');
        //            ^---------- selector context
    }else{
    // do nothing
    }
});

_{.load() is deprecated}

【讨论】：

我认为这是对的，但是 img.portfolioImg 有多个实例，所以它们最终都具有相同的高度？
@gilesadamthomas 如果您的所有图像在加载时具有相同的高度，那么可能是的。检查我的代码，然后告诉我结果。
是的，它们的高度相同
不确定选择器上下文是如何工作的，但所有 #page_categories 和 .entry 似乎都是隐藏或可见的，这取决于第一个叠加层而不是它们的父叠加层高度？
@gilesadamthomas 你的标记结构是什么样的<article><img><div></div></article><article><img><div></div></article> 或<article><img><div></div><img><div></div></article>？

【解决方案2】：

我认为你应该改变

$('img.portfolioImg').load(function() {
var imgHeight = $('img.portfolioImg').height();

到

$('img.portfolioImg').each(function(image) {
var imgHeight = $(this).height();

因为$('img.portfolioImg').height(); 给出了第一个元素的高度

【讨论】：

所以它为 img.portfolioImg 的每个实例创建一个变量？
是的，选择 $('img.portfolioImg') 和 imgHeight 中的每个元素的新 var 应该是 $(this).height();，而不是 $(image).height(); - 在答案中修复它