1

这与我之前的 HTML 所在的问题有关：将兄弟姐妹分组到 div

我发现很难解释我想要完成的工作，所以我画了一个快速的线框表示：

期望的结果线框

我找到了一个与对内容进行分组并获得所需视觉效果的不同解决方案。该图像被保存在一个锚标记中，因此我使用 jQuery 找到页面上最高的 img 并将该高度应用于包含一个标记。因此，我没有将底部垂直对齐并将固定高度设置为内容，而是将内容垂直对齐到顶部，并将最大高度设置为锚标记并将该标记中的图像垂直对齐到底部。

最大高度 TD

var maxHeight = 0;

$('.Product img').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height()); })

$('.ProductThumbnail').css({"height":maxHeight});

该代码完美运行。但是，某些类别有多个页面，当您选择“下一页”链接时，电子商务解决方案使用 jQuery 动态加载页面并且代码中断。

所以，我的问题是“每当图像加载到页面上时，我怎样才能拥有上面列出的 onLoad 功能？”

[注 1：] 我已经尝试使用desandro 加载的图像，但它没有像我希望的那样工作。

[注 2：] 我还希望 maxHeight 匹配每一行而不是整个页面，因为 TD 保存在 TR 中。

[注 3：] 我根本无法更改 html。我只被允许对头部、自定义页眉和自定义页脚进行补充。内容不可编辑。

4

2 回答 2

1

您可以为每个重新计算该行的高度的委托tr（当孩子img触发事件时触发）附加一个委托：ready

$("table#tableId tr").on("ready", "img", function(){
       var maxHeight = 0;

       $(this).find('.Product img').each(function() {
           maxHeight = Math.max(maxHeight, $(this).height()); })

       $(this).find('.ProductThumbnail').css({"height":maxHeight});
    })
});

ETA：此代码使用live()方法来委托事件。使用此方法，您可以将事件绑定到尚不存在的元素。请注意，live()它已被弃用，on()应该使用，但要委托给on()您需要一个未被替换的父元素。

$("table#tableId img").live("ready",  function(){
       var maxHeight = 0;
       var $row = $(this).parents("tr");
       $row.find('img').each(function() {
           maxHeight = Math.max(maxHeight, $(this).height()); })

       $row.find('.ProductThumbnail').css({"height":maxHeight});
    })
});
于 2013-01-24T18:03:59.420 回答
1

在您的情况下，您应该或必须使用此功能

$('img').ready(function(){
    console.log('image is loaded');


})

它将查看元素是否已加载，然后执行功能...

这是一个例子

杰菲德尔

于 2013-01-24T17:57:31.403 回答