Узнайте, является ли изображение горизонтальным или вертикальным

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") возвращает массив элементов с классом "img".Если вы делаете их по одному, это работает.

См. Пример здесь: http://jsfiddle.net/2nnK2/

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"). Width () возвращает массив. попробуйте ограничиться одним элементом в каждом массиве или запустить код в каждом блоке.

$ (this) также не будет иметь контекст изображения.

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