Question

我有多个图片，想要查看每个图像是水平还是垂直，并为其添加一个类，以便我可以相应地设置它。

我尝试过多种方法，包括：

if ($(".img").width() > $(".img").height()) {
$(this).addClass("horizontal");
}

我做错了什么？谢谢！

Answer 1

由于$(this)，您的代码无效。 this未指向此处的图像元素，但它指向范围的最新实例。

尝试使用jQuery each循环遍历所有图像元素，然后有条件地添加所需的类。

$("img").each(function(){
    var $this = $(this);
    if ($this.width() > $this.height()) {
        $this.addClass("horizontal");
    }
});

如果您对所有图像元素都有一个类".img"，那么您可以使用类选择器。

$(".img").each(function(){
    var $this = $(this);
    if ($this.width() > $this.height()) {
        $this.addClass("horizontal");
    }
});

或者，您可以使用jQuery filter方法过滤所有宽度大于高度的图像，然后一次添加所需的类。

$(".img").filter(function()
    var $this = $(this);
    return $this.width() > $this.height();
}).addClass("horizontal");

.filter() - 将匹配元素集合减少为与选择器匹配的元素或传递函数的测试。

如果您在页面加载时执行此操作，请确保在窗口加载事件中执行此代码，这将确保加载所有图像。

$(window).load(function(){
     $(".img").each(function(){
        var $this = $(this);
        if ($this.width() > $this.height()) {
            $this.addClass("horizontal");
        }
     });
});

Answer 2

如果没有在图像上给出适当的宽度/高度，则可能是在加载图像之前计算width.height。要做到这一点，您需要做的就是将代码包装在$(.'img').load(function(){});中。一旦图像加载，这将运行匿名函数中的代码。

这将使您的代码看起来像：

$(".img").load(function(){
    if ($(this).width() > $(this).height()) {
        $(this).addClass("horizontal");
    }
});

但是，如果您为多个图像执行此操作，则需要将其包装在每个块中：

$(".img").each(function() {
    $(this).load(function(){
        if ($(this).width() > $(this).height()) {
            $(this).addClass("horizontal");
        }
    });
});

虽然有几张海报说你目前的代码使用的是未定义的this

Answer 3

$（“。img”）。width（）返回一个数组。尝试限制每个数组中的一个项目或在每个块中运行代码。

$（this）也没有图像的上下文。

$(".img").each(function() {
 if ($(this).width() > $this.height()) {
  $(this).addClass(".horizontal");
 }
});

Answer 4

您的图片是否有img课程？如果没有，您可以使用$('img')选择所有图像。

尝试.each：

$('img').each(function(){
    var t = $(this); // Cache
    if(t.width()>t.height()){
        t.addClass('horizontal');
    } else { t.addClass('vertical'); }
});

Answer 5

$(".img")返回类“img”的元素数组。如果你一次只做一个，它就可以了。

请在此处查看示例：http://jsfiddle.net/2nnK2/

找出图像是水平还是垂直

5 个答案: