Question

$(window).load(function () {

    var $imgs = $('.boxInner img');

    $imgs.each(function () {
        var w = $(this).clientWidth;
        var h = $(this).clientHeight;

        if (w < h) { $(this).css("display","none"); };
    });
});

我试图以这么多不同的方式写这个无济于事。基本上，只需看看图片的宽度和高度。如果高度大于宽度，则将显示屏设置为无。有人请帮我解决这个问题。应该这么简单。

Answer 1

使用dom对象及其api：

$imgs.each(function () {
    var w = this.clientWidth;
    var h = this.clientHeight;

    if (w < h) { $(this).css("display","none"); };
});

或使用jQuery对象及其api：

$imgs.each(function () {
    var w = $(this).width();
    var h = $(this).height();

    if (w < h) { $(this).css("display","none"); };
});

Answer 2

// you want $(window).load() because you need to make sure your images are loaded before you can run this function
$(window).load(function (){
    var imgs = $('.boxInner img');

    if (imgs.length){
        $.each(imgs, function (index, item){
            var w = item.width(),
                h = item.height();

            if (w < h) { 
                item.css({display: "none"}); 
            }
        });
    }
});

Answer 3

正如我在评论中所写，如果你使用window.load，你必须等待页面的所有资源都会加载。使用image.complete和$（image）。load（function（）...可以做得更好。或者寻找一个图像加载器插件，网上有很多。

jquery高度/宽度if语句不起作用

3 个答案: