1

横向きか縦向きかを判断した後、画像にクラスを追加しようとしています。私が抱えている問題は、明らかに適切に登録されていないimgこのようなタグにクラスが追加されていることです。img.landscapeどうすればこれを適切に達成できますか: <img class="landscape"?

$(data.images).each(function(j, imageURL){
        var thumbnail = new Image();
        thumbnail.src = imageURL;
        thumbnail.onload = function() {
            $('.images').append('<div class="image_mask"><a href="' + imageURL + '"><img src="' + imageURL + '"/></a></div>');
            if (thumbnail.width > thumbnail.height){
                $(this).addClass('landscape');
            }
        };
});

私の以前の解決策は、追加された文字列にクラスが追加された if/else ステートメントを含めることでしたが、これにアプローチするよりクリーンな方法があるかどうか疑問に思っています。ありがとう！

編集 -

http://jsfiddle.net/curly33/XeHzK/1/

4

2 に答える 2

0

<img>数行前に動的に作成しているタグにクラスを追加したいと思いますか? もしそうなら、あなたは次のようにすることができます：

$('.image_mask img').addClass('landscape');

ループ内にあり、複数div.image_maskあるため、配列インデックスjをクラス修飾子として使用します。

$(data.images).each(function(j, imageURL){
        ...
        thumbnail.onload = function() {
            $('.images').append('<div class="image_mask image_mask' + j + '"><a href="' + imageURL + '"><img src="' + imageURL + '"/></a></div>');
            //                                                     ^^^^^^
            if (thumbnail.width > thumbnail.height){
                $('.image_mask' + j + ' img').addClass('landscape');
                //              ^^^^^^
            }
        };
});

アップデート

これは受け入れられましたが、最初に提案したようにクラス名を追加するのは不器用です。よりクリーンなアプローチは、j配列インデックス変数を jQuery の関数と組み合わせてeq使用​​して、関連する画像マスクを見つけることです。

$('.images .image_mask').eq(j).addClass('landscape');

..次に、クラスを追加するアプローチ全体を廃止します。

于 2013-04-12T16:53:16.553 に答える
0

ストリングビルディングに入れるだけ

$(data.images).each(function(j, imageURL){
        var thumbnail = new Image();
        thumbnail.src = imageURL;
        thumbnail.onload = function() {
            var orientationClass = thumbnail.width > thumbnail.height ? "landscape" : "portrait";
            $('.images')
                .append(
                    '<div class="image_mask"><a href="' +
                    imageURL +
                    '"><img class="' +
                    orientationClass +
                    '" src="' +
                    imageURL +
                    '"/></a></div>'
                );
        };
});

編集：その他のオプション

より冗長で簡潔にしたい場合は、要素を 1 つずつ構築できます。

var $img = $('<img />', {
    class: thumbnail.width > thumbnail.height ? "landscape" : "portrait",
    src: imageUrl
});

var $a = $('<a />', {
    href: imageUrl,
}).append($img);

var $div = $('<div />', {
    class: "image_mask"
}).append($a);

$('.images').append($div);

または、より効率的な文字列構築を使用したいが、より読みやすく/パフォーマンスを向上させるには、結合を使用して配列を実行できます。

var contents = [
    '<div class="image_mask"><a href="',
    imageURL ,
    '"><img class="',
    orientationClass,
    '" src="',
    imageURL,
    '"/></a></div>'];

$('.images').append(contents.join(''));
于 2013-04-12T16:56:50.263 に答える