Question

我正在循环查看一组图像以检查每个图像的宽度。如果图像宽度小于图像高度，我想为该特定图像添加“A类”，如果不是，我想将“B类”添加到该特定图像。

我可以让它发挥作用，但它很有气质。它通常有效，但有时它会在图像上添加“B类”，而它应该添加“A类”。我也尝试使用布尔值来确保函数的每个部分都应该触发，但我仍然得到相同的结果。任何想法可能是什么问题？

以下代码：

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

Answer 1

加载图像后检查宽度和高度：

slideImage.each(function() {

    $(this).load(function(){
        //image successfully loaded, do stuff here
        console.log($(this).height());
    }).error(function(){
        //something went wrong
    });

Answer 2

您的代码有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;
}

此次尝试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;
}

jQuery图像每个循环问题

2 个答案: