Question

所以我试图在加载页面时在div中应用“padding-bottom”函数，唯一的问题是宽度返回整个文档值而不是div值。当我使用另一个功能（在图像之间切换）时，功能正常。

$(window).load(function () {
  $('.photoset').each(function () {
    $items = $(this).find('img')

    function get_height(target) {
      return (($items.eq(target).height() / $(this).width()) * 100) + '%';
     }
      $items.css({ paddingBottom: get_height(0) });
  });
}

Css如下：

.photowrapper{
    width:60%;
    margin:auto;
}
.photoset {
    position: relative; 
    display: block;   
    margin:auto;
    overflow:hidden;
}
.photoset figure{
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    text-align:center;
}

.photoset img {
    opacity: 0;
    transition:opacity 1.2s;
    max-width:100%;

}
.photoset .photoset-show img{
    opacity: 1;
}

和HTML

 <div class="photowrapper">
   <div class="photoset center-block">

    <figure class="photoset-show">
     <img src="/images/5220a574-77a8-4aa6-aecc-aedf60eed6e2.jpg" />
    </figure>
    <figure class="">
     <img src="/images/9e59af1e-de75-4ddb-b091-f816224d9f6e.jpg" />
    </figure>
    <figure class="">
      <img src="/images/ad76e5e3-5780-4f22-bcb4-8106fc41161a.jpg" />
    </figure>

 </div>
</div>

此功能按预期工作，在图像之间切换时返回正确的宽度值：

        var showCurrent = function (photoset) {
        $items = photoset.find('figure');
        $images = photoset.find('img');
        var counter = photoset.data('counter');
        var numItems = $items.length;
        var itemToShow = Math.abs(counter % numItems);
        $items.each(function () {
            $(this).removeClass('photoset-show');
        })
        function get_height(target) {
            return (($images.eq(target).height() / photoset.width()) * 100) + '%';
        }
        photoset.animate({ paddingBottom: get_height(itemToShow) }, 400);
        $items.eq(itemToShow).addClass('photoset-show');

    };

Answer 1

this不是您认为get_height()内的内容。它在函数内部有不同的上下文。存储对this的引用或将其作为参数传递

尝试

$(window).load(function () {
  $('.photoset').each(function () {
    var $photoset = $(this), $items = $photoset.find('img')

    function get_height(target) {
      return (($items.eq(target).height() / $photoset.width()) * 100) + '%';
     }
      $items.css({ paddingBottom: get_height(0) });
  });
}

HTML，jQuery，CSS - Width（）在页面加载时返回整个页面宽度而不是div？

1 个答案: