1

これは、HTML が配置されている以前の質問: Grouping siblings into a div に関連しています。

何を達成しようとしているのかを説明するのは難しいので、簡単なワイヤーフレーム表現を作成しました。

望ましい結果のワイヤーフレーム

コンテンツをグループ化し、必要なビジュアルを取得することとは別の解決策を見つけました。画像はアンカータグに保持されているため、jQuery を使用してページ上で最も高い画像を見つけ、その高さをタグを含むタグに適用しました。したがって、コンテンツに固定高さを設定して下を垂直方向に揃える代わりに、アンカー タグに最大高さを設定してコンテンツを上部に垂直方向に揃え、そのタグの画像を下部に垂直方向に揃えました。

最大高さ TD

var maxHeight = 0;

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

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

コードは完全に機能します。ただし、一部のカテゴリには複数のページがあり、[次のページ] リンクを選択すると、e コマース ソリューションは jQuery を使用してページを動的にロードし、コードが壊れます。

それで、私の質問は「画像がページに読み込まれるたびに onLoad の上にリストされた関数をどのように持つことができますか?」です。

[注 1:] 私はすでにdesandro によって読み込まれた画像を使用しようとしましたが、期待どおりに動作しませんでした。

[注 2:] TD は TR 内に保持されるため、maxHeight をページ全体ではなく行ごとに一致させたいと考えています。

[注 3:] html をまったく変更できません。ヘッダー、カスタム ヘッダー、カスタム フッターにのみ追加を許可されています。コンテンツは編集できません。

4

2 に答える 2

1

あなたの場合、この関数を使用する必要があります。

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


})

要素がロードされているかどうかを確認してから、関数を実行します...

ここに例があります

jsfiddel

于 2013-01-24T17:57:31.403 に答える
1

その行の高さを再計算するデリゲートをそれぞれにアタッチできます(子がイベントを発生させるtrたびにトリガーされます)。imgready

$("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 に答える