Question

我需要根据40个项目列表中的第一个图像大小设置div高度和宽度（所有图像大小相同）。要使其缩短功能仅在您第一次加载页面时起作用，在访问其他页面后，imgSize将是未定义的。

<div id="ulSorList"> 
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 mix">
    <div class="portfolio-list">
      <a href="#">    
          <div class="overlay-block"></div>
          <img src="/img/1.jpg" class="img-responsive">
      </a>
    </div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 mix">
    <div class="portfolio-list">
      <a href="#">    
          <div class="overlay-block"></div>
          <img src="/img/2.jpg" class="img-responsive">
      </a>
    </div>
  </div>
  ...
  ...
  ...
</div>

脚本

$("#ulSorList img:first").load(function() {
  imgSize = $(this);
  $(".portfolio-list a .overlay-block").width( imgSize.width()).height( imgSize.height() );
  alert(imgSize.width());
});

一切正常，直到您浏览网站（加载新页面）。

似乎脚本在某些时候打破了，所以我想我只需要获得第一个列表项的img大小。

我编辑了，因为我不知道问题可能是什么问题。这个问题很糟糕。

没有什么我不能让它工作，现在似乎脚本没有破坏，至少我得到imgSize宽度，但我仍然处于相同的位置。导航后脚本不会起作用。

有什么想法吗？

Answer 1

试试这个。

$("selector for menu"). on("click", function() {
    var imgSize= $(".portfolio-list a img");
    $(".portfolio-list a .overlay-block").width( imgSize.width()).height( imgSize.height() );
});

Answer 2

我认为我解决了，可能不是最好的方式，但现在它的工作。问题是导航后，图像已经加载imgSize在放入容器之前返回高度和宽度。我通过添加超时解决了这个问题。

Answer 3

您在jquery中使用锚标记，但它在HTML代码中。这是一个错误。

$(".portfolio-list>img").load(function() {
var imgSize= $(this);
$(".portfolio-list>.overlay-block").width(imgSize.width()).height(imgSize.height());
});

jquery根据图像大小设置div容器的高度和宽度

3 个答案: