3

1ページにたくさんの画像があります。jQueryを使用して各画像の高さを取得し、画像の後に表示しようとしています。だからここに私のコードがあります：


$(document).ready(function() {
  $(".thumb").each(function() {
    imageWidth = $(".thumb img").attr("width");
    $(this).after(imageWidth);
  });
});



<div class="thumb"><img src="" border="0" class="thumb_img"></div>
<div class="thumb"><img src="" border="0" class="thumb_img"></div>
<div class="thumb"><img src="" border="0" class="thumb_img"></div>




[...]

jQueryの背後にある私のロジックは、各「thumb」セレクターを調べ、「thumb」内のimgの高さを変数「imageWidth」に割り当て、各「thumb」の後にテキストで高さを表示することです。

私が抱えている問題は、最初の画像でのみ機能し、その後終了することです。もちろん、「thumb_img」クラスを使用すれば機能させることができますが、「thumb」クラスの画像の高さにアクセスする必要があります。

私はjQueryにかなり慣れていないので、これがあまり混乱しないことを願っています。よろしくお願いします。

4

4 に答える 4

10

呼び出されるまでに画像が読み込まれないため、document.ready（）を使用してこれを行うことはできません。

実際には、このコードをonload（）イベントハンドラーに配置する必要があります。このハンドラーは、ドキュメントとすべての画像の読み込みが完了した後に呼び出されます。

ブラウザが画像の大きさを知るのは、画像の読み込みが完了したときだけです。

于 2009-08-13T18:56:22.127 に答える
9

これを使って：

imageWidth = $(this).children("img").attr("width")

以下は、すべての画像を選択します。

$(".thumb img")

... so when you ask for the attribute it returns it from the first object in the collection

Sorry for all the edits... but it is best to reuse jquery objects, so:

var $this = $(this)

Then refer to $this were needed for optimization. Not that big a deal in this example, but it is a good practice to use.

于 2009-08-13T18:50:49.520 に答える
0 
$().ready(function() {

        $(".thumb img").load(function() {
            var imageHeight = $(this).height();
            $(this).parent().append(imageHeight);

        });

});
于 2009-08-13T19:29:30.970 に答える
0

似たようなものを使用して画像をプリロードし、マウスオーバーとマウスアウトにコードを設定し、クラス名「スワップ」ですべての画像のスタイルを設定しました。私にとってはうまくいきません$(this)でしたが、直接thisうまくいきました：

// in jquery
$(document).ready(function(){
        swapAndPreload();
    });

function swapAndPreload(){
    $(".swap").each(function(){
        // preload images in cache
        var img = new Image();
        img.src=this.src.replace(/([-_])out/,'$1over');
        //set the hover behaviour
        this.onmouseover = function(){
            this.src=this.src.replace(/([-_])out/,'$1over');
        }
        //set the out behaviour
        this.onmouseout = function(){
            this.src=this.src.replace(/([-_])over/,'$1out');
        }
        //set the cursor style
        this.style.cursor="pointer";
    });
}
于 2011-03-07T20:22:05.730 に答える