Question

我是js＆amp; amp;的新手jQuery和我需要帮助来动态获取加载的img的宽度和高度，并将这些维度分配给绝对定位的元素（.imgCover）。所有图像都有不同的尺寸。

下面的js代码仅返回第一张图片的尺寸，而不会计入最后一张图片。我正在寻找一种迭代所有元素的方法，获取每个（.imageHolder）块中的照片尺寸 - 宽度和高度，并将它们分配给各自的（.imgCover）div。

这是我目前的代码。

HTML

<div class="imageBlock">

<div class="imageHolder">
    <div class="imgCover"> </div>
    <img class="photo" src="images/img1.jpg"/>
</div>

<div class="imageHolder">
    <div class="imgCover"> </div>
    <img class="photo" src="images/img2.jpg"/>
</div>

<div class="imageHolder">
    <div class="imgCover"> </div>
    <img class="photo" src="images/img3.jpg"/>
</div>

 </div><!-- imageBlock-->

的Javascript

var imageCover = $('.imgCover'),
    finalImage = $('.photo');

function resizeDiv() {
    imageCover.heightfinalImage.height());
imageCover.width(finalImage.width());
}

resizeDiv();

$(window).resize(function() {
    resizeDiv();
});

谢谢！

Answer 1

将resizeDiv（）替换为：

function resizeDiv() {

    $('.photo').each(function() {

        var height = $(this).height();
        var width = $(this).width();

        var $imgCover = $(this).prev(); // get the previous element to the photo (the image cover)

        $imgCover.height(height);
        $imgCover.width(width);
    });

}

你几乎就在那里，你所缺少的是.each循环

循环遍历相同的类元素并指定宽度和高度

1 个答案: