Проблема с функцией jQuery each () и размером изображения

Question

Проблема с функцией jQuery each () и размером изображения

0

Здесь моя проблема, у меня есть портфолио, где изображения отображаются динамически:

<?php echo'<div class="real"><img src='".$pathReal."'></div>' ?>

Они должны изменяться в зависимости от размера изображения.

Итак, в jQuery я назначаю класс в рапорте размером изображения:

$(".real img").each(function(){
  var widthImage = $(this).width();
  var heightImage = $(this).height();

  if(widthImage > heightImage ){
     $(".real img").addClass('realHeight');
  }else{
     $(".real img").addClass('realWidth');
  }
});

Но он не работает:

<img class="realHeight realWidth" src="img/1.jpg">

2 класс, когда я хочу, чтобы он был тем или иным.

(CSS):

.realWidth{width: 100%;}

.realHeight{height: 100%;}

Может кто-то мне помочь, пожалуйста?

(Извините за мой плохой английский)

takumaterasu 03 май 2014, в 15:49

Источник

1

Вместо этого используйте: $(this).addClass('realHeight'); и то же самое ниже
A. Wolff 03 май 2014, в 13:12

Теги:

jquery

each

function

image

addclass

3 ответа

0

Ваше эхо кажется неправильным:

<?php echo'<div class="real"><img src='".$pathReal."'></div>' ?>

который должен выглядеть следующим образом:

<?php echo'<div class="real"><img src="'.$pathReal.'"></div>' ?>

Ans, поскольку вы зацикливаете, чтобы использовать $(this)

if(widthImage > heightImage ){
   $(this).addClass('realHeight');
}else{
   $(this).addClass('realWidth');
}

Jai 03 май 2014, в 12:11

0

Спасибо за помощь !
takumaterasu 03 май 2014, в 14:13

0

Используйте это вместо применения селекторов классов внутри каждого

$(".real img").each(function(){
  var widthImage = $(this).width();
  var heightImage = $(this).height();

  if(widthImage > heightImage ){
     $(this).addClass('realHeight');
  }else{
     $(this).addClass('realWidth');
  }
});

$ (". real img"). addClass ('realHeight');

Это применит класс realHeight ко всем изображениям с классом real. Мы не хотим, чтобы

maj 03 май 2014, в 11:04

0

Спасибо за помощь !
takumaterasu 03 май 2014, в 14:13

Ещё вопросы

Вместо этого используйте: $(this).addClass('realHeight'); и то же самое ниже

dknaack · Accepted Answer · 2014-05-03T10-32-00.000Z

Используйте $(this) в вашем цикле, чтобы манипулировать правым элементом DOM (ваш тег изображения)

И используйте naturalWidth и naturalHeight чтобы получить правильный размер изображения.

$(".real img").each(function(){
  var widthImage = $(this).naturalWidth;
  var heightImage = $(this).naturalHeight;

  if(widthImage > heightImage ){
     $(this).addClass('realHeight');
  }else{
     $(this).addClass('realWidth');
  }
});