Question

请帮我写一下jQuery：

我在bootstrap模式中有这个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();。

<强>更新

我建议和守护者一样。请尝试使用shown.bs.modal。你看到0px的原因很可能是因为你试图确定它的高度时你的图像是不可见的。如果您使用shown.bs.modal事件，则模态已经可见，因此图像具有可确定的高度。

Working Example

Answer 2

您可以直接访问选择器上的 .css（） -function，如下所示：

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

请注意，使用类作为jQuery选择器将最有可能返回多个项目（如果多个标签具有 zoom-image -class和 .css（）然后将返回第一个返回项目的高度。最好在图像上附加一个唯一ID并使用该ID。如下所示：

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

然后使用ID选择器：

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

注意：您应该看一下 .css（“height”）和 .height（）之间的区别。请参阅update。

编辑：也许您的问题是使用 show.bs.modal ，您可以尝试显示 n .bs.modal 。请参阅here。

Answer 3

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

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

我不想点击图片来获取身高值，但是，这可能会帮助其他想要这样做的人！

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

3 个答案: