显示引导模态时如何获取图像的高度？

Question

请帮我为此编写jQuery：

我在引导程序模式中有以下HTML源代码：

<div class="product-preview nospace">
    <div class="product-thumb-list product-image-list">
        <img class="img-responsive" src="images/products/product-1-l.jpg" data-zoom-image="images/products/product-22-l.jpg" alt="product-thumb">
        <img class="img-responsive" src="images/products/product-2-l.jpg" data-zoom-image="images/products/product-22-l.jpg" alt="product-thumb">
        <img class="img-responsive" src="images/products/product-3-l.jpg" data-zoom-image="images/products/product-33-l.jpg" alt="product-thumb">
        <img class="img-responsive" src="images/products/product-4-l.jpg" data-zoom-image="images/products/product-44-l.jpg" alt="product-thumb">
    </div>
    <div class="product-thumb product-image">
        <img class="img-responsive zoom-image" src="images/products/product-1-l.jpg" data-zoom-image="images/products/product-11-l.jpg" alt="product-img">
    </div>
</div>

在JS中，我这样写：

$('.modal-quickview').on('show.bs.modal', function () {

    $('.zoom-image').click("bind", function() {
        var height =$(this).css('height');

        alert(height);
     });
});

现在，我想获取图像的高度，但没有单击之类的操作。

我该如何修改该脚本？ 有人帮我吗 我是JS的新手。

Answer 1

怎么样：

$('.modal-quickview').on('show.bs.modal', function () {
    var height = $(this).find('.zoom-image').css('height');
});

如果您不想获取css的高度值，而是实际的图像高度，请使用： $(this).find('.zoom-image').height(); 代替。

更新

我建议与Keeper相同。 尝试改用shown.bs.modal 。 您看到0px的原因很可能是因为您试图确定其高度时图像不可见。 如果使用shown.bs.modal事件，则该模态已经可见，因此图像具有可确定的高度。

工作实例

Answer 2

您可以像这样直接在选择器上访问.css（） -函数：

var height = $(".zoom-image").css("height");

请注意，将一个类用作jQuery选择器将使大多数likley返回多个项目（如果多个标签具有zoom-image -class，然后.css（）将返回第一个返回项目的高度。在图像上附加一个唯一的ID并使用该ID。

<img id="displayedImage" class="img-responsive zoom-image" (...)>

然后使用ID选择器：

var height = $("#displayedImage").css("height");

注意：您应该看一下.css（“ height”）和.height（）之间的区别。 看这里 。

编辑：也许您的问题是使用show.bs.modal ，您可以尝试显示n .bs.modal 。 看这里 。

Answer 3

一种获取高度的可能方法是在点击图像时进行计算：

$('.modal-quickview').on('show.bs.modal', function () {
    $('.zoom-image').click("bind", function() {
        var height =$(this).css('height');
        alert(height);
    });
});

我不想单击图像来获取高度值，但是，这可能会对想要这样做的其他人有所帮助！