0

現在、一連の画像をループして、各画像の幅を確認しています。画像の幅が画像の高さよりも小さい場合は、その特定の画像に「クラス A」を追加します。そうでない場合は、その特定の画像に「クラス B」を追加します。

私はこれを機能させることができますが、かなり気まぐれです。通常は機能しますが、「クラス A」を追加する必要があるときに、画像に「クラス B」を追加することがあります。関数の各部分が必要なときに起動するようにブール値も使用しようとしましたが、それでも同じ結果が得られます。問題が何であるかについてのアイデアはありますか？

以下のコード:

loadContent = function() {
        //set up ajax
        ajaxLoader.ajaxStart(function() {
            $(this).fadeIn(200);
        }).ajaxStop(function() {
            $(this).fadeOut(200);

        //load the content
        fixedWrap.load(postLink, function() {
            var loopingImages,
                slideImage = $('.ddbSlide img'),
                slideImageFirst = $('.ddbSlide img:first');

                //start the image loop
                slideImage.each(function() {
                var imgWidth = $(this).width(),
                    imgHeight = $(this).height();
                loopingImages = true;
                //
                if (imgWidth <= imgHeight) {
                    $(this).addClass('ddbImagePortrait');
                    $(this).css({ left: '55%' });
                    loopingImages = false;
                } else {
                    $(this).addClass('ddbImage');
                    $(this).css({ left: '34%' });
                    loopingImages = false;
                }
            });

            if (loopingImages == false) {
                var checkingClass;
                if (slideImageFirst.hasClass('ddbImagePortrait')) {
                    $('.articleTextWrap').css({ left: '20%' });
                    checkingClass = false;
                } else {
                    $('.articleTextWrap').css({ left: '5%' });
                    checkingClass = false;
                }
                if (checkingClass == false) {
                addSlider();
                }
            }

            return false;
        })
    }; //END loadContent function
4

2 に答える 2

1

画像が読み込まれた後、幅と高さを確認します。

slideImage.each(function() {

    $(this).load(function(){
        //image successfully loaded, do stuff here
        console.log($(this).height());
    }).error(function(){
        //something went wrong
    });
于 2013-02-11T11:08:12.737 に答える
0

あなたのコードには2つの問題があります

そのためにはまずloopingImagesいつもfalseこれを試して、

loopingImages = true;
//
if (imgWidth <= imgHeight) {
    $(this).addClass('ddbImagePortrait');
    $(this).css({ left: '55%','position':'relative' });
} else {
    $(this).addClass('ddbImage');
    $(this).css({ left: '34%' ,'position':'relative'});
    loopingImages = false;
}

2 回目checkingClassは常にfalseこの試行のためです。

var checkingClass;
if (slideImageFirst.hasClass('ddbImagePortrait')) {
    $('.articleTextWrap').css({ left: '20%','position':'relative' });
    checkingClass = true;
} else {
    $('.articleTextWrap').css({ left: '5%' ,'position':'relative'});
    checkingClass = false;
}
于 2013-02-11T11:19:57.617 に答える