2

こんにちは、

プロポーション（横/縦/正方形）に応じて、各画像にクラスを追加しようとしています。このコードは JSfiddle では機能しますが、Web サイト (ローカルまたはサーバー) では機能しません。

$(document).ready(function()
{
    $('img').addClass('wide');
    $.each($('img'), function()
    {
        var image = $(this);

        if (image.height() > image.width()) {
            image.removeClass('wide');
            image.addClass('tall');
        } else if (image.height == image.width()) {
            image.removeClass('wide');
            image.addClass('square');
        }
    });
});​

ここに私の JSfiddle があります: http://jsfiddle.net/LYxv6/。

4

6 に答える 6

5

コードが jsfiddle で機能する理由は、サイトが (デフォルトで) コードをonloadハンドラーでラップしているためです。$(document).ready()このハンドラーは、DOM 構造が完了するまで待機するだけとは異なり、すべての画像が読み込まれると呼び出されます。

addClass文字列の代わりに関数パラメータを取るのバージョンを利用すれば、クラスを変更する関数は簡単です。

$(window).on('load', function() {
    $('img').addClass(function() {
        if (this.height === this.width) {
            return 'square';
        } else if (this.height > this.width) {
            return 'tall';
        } else {
            return 'wide';
        }
    });
});

コールバックthisには要素自体があり、 jQuery を使用しなくてもその要素とプロパティに<img>直接アクセスできます。.width.height

.each()これは、ループ内で jQuery 関数を繰り返し呼び出すよりもはるかに効率的です。

于 2012-09-04T08:11:37.190 に答える
1

このスクリプトを実行する必要があります

$(window).load()

...そうしないと（準備ができている場合）、画像がまだロードされておらず、アクセスしたときにサイズがまだ不明な場合があります。

ここでもいくつかの括弧を忘れました：

else if (image.height == image.width()) {

する必要があります

else if (image.height() == image.width()) {
于 2012-09-04T08:04:25.870 に答える
1

$('img').each に変更し、image.height() に括弧がありません (これは関数です)

$(window).load(function() {

$('img').addClass('wide');

$('img').each(function() {
    var image = $(this);

    if (image.height() > image.width()) {
        image.removeClass('wide');
        image.addClass('tall');
    }
    else if (image.height() == image.width()) {
        image.removeClass('wide');
        image.addClass('square');
    }

});

});
于 2012-09-04T08:09:08.997 に答える
0

ローカル システムのサーバーで、.html ファイルを作成します。

これをドキュメント ロードに変更し、幅部分の 1 つに欠落している中括弧を挿入します。.html ファイルが次のようになっていることを確認します。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title></title>
    <script>
       $(document).load(function() {

    $('img').addClass('wide');

    $.each($('img'), function() {
        var image = $(this);

        if (image.height() > image.width()) {
            image.removeClass('wide');
            image.addClass('tall');
        }
        else if (image.height() == image.width()) {
            image.removeClass('wide');
            image.addClass('square');
        }

    });

});​
    </script>
    <style>
    img{
height:250px;
}
.wide{
border:10px solid #aed;

}
.tall{
border:10px dashed #dea;

}
.square{
border:10px dotted #ade;

}​
    </style>
    </head>
    <body>
    <img src="http://24.media.tumblr.com/tumblr_m9t0dwyu0P1qjfsubo1_500.jpg"/>
    <img src="http://24.media.tumblr.com/tumblr_m9iqv8oQl01qcpwsso1_500.jpg "/>
    <img src="http://25.media.tumblr.com/tumblr_m9n4kyf8aA1r1thfzo5_1280.jpg"/>  
    </body>
    </html>
​

<style></style>and<script></script>を<link rel="stylesheet" type="text/css" href="yourstyle.css"/>andに置き換えることができます<script type ="text/javascript" src="jquerywhatever.js"></script><script type ="text/javascript" src="YOURSCRIPT.js"></script>

于 2012-09-04T08:07:41.397 に答える
0

if else ifステートメントで変数を使用してみてください。

ここにjsFiddleがあります。

    var biggerVal = image.height() > image.width();
    var equalVal = image.height() == image.width();

    if ( biggerVal ) {
        image.removeClass('wide');
        image.addClass('tall');
    } else if ( equalVal ) {
        image.removeClass('wide');
        image.addClass('square');
    }

この質問に関する同じ問題: How to build simple sticky navigation with jQuery?

于 2012-09-04T07:59:23.610 に答える
0

私はこのようなことをします：

(function ($) {
    $.fn.proportions = function (options) {
        options = $.extend(options, {
            wideClass : 'wide',
            tallClass : 'tall',
            squareClass : 'square'
        });
        addProportions = function () {
            img = $(this);
            var ratio = img.width() / img.height();
            if (ratio > 1) {
                return img.addClass(options.wideClass);
            }
            if (ratio === 1) {
                return img.addClass(options.squareClass);
            }
            return img.addClass(options.tallClass);
        };
        return this.each(function () {
            if ($(this).width() !== undefined) {
                addProportions.call(this);
            } else {
                $(this).on('load', addProportions);
            }
        });
    };
}(jQuery));

jQuery(function ($) {
    jQuery('img').proportions();
});​

プラグインに入れると再利用可能になります。また、jsfiddle のように window.load を使用する代わりに、この関数を各画像の load イベントにアタッチして、クラスがすぐに追加されるようにしました。

于 2012-09-04T08:09:50.823 に答える