jQuery .each () для повторяющихся элементов - PullRequest
Новая
       8

jQuery .each () для повторяющихся элементов

0 голосов
/ 02 октября 2018

Я пытаюсь использовать jQuery для определения ориентации ряда изображений.После обнаружения я хочу добавить класс для обозначения этого, то есть .landscape.

. Приведенный ниже код, по-видимому, оценивает только первое изображение, с которым он сталкивается, а затем применяет его ко всем последующим изображениям.Например, если первое изображение имеет альбомную ориентацию, оно будет применено ко всем изображениям, включая портретное или квадратное.

Неправильно ли я использую выражение .each()?

Спасибо.

HTML 

<div class="carousel-cell">
    <img src="domain.com" data-width="100" data-height="200" />
</div>
<div class="carousel-cell">
    <img src="domain.com" data-width="200" data-height="100" />
</div>
<div class="carousel-cell">
    <img src="domain.com" data-width="100" data-height="100" />
</div>

JQUERY 

// Detect image orientation 
$('.carousel-cell').each(function () {
"use strict";

var img = $('img');

if (img.attr('data-width') > img.attr('data-height')){
    // Landscape
    img.removeClass().addClass('landscape');
} else if (img.attr('data-width') < img.attr('data-height')){
    // Portrait
    img.removeClass().addClass('portrait');
} else {
    // Equal (Square)
    img.removeClass().addClass('square');
}
});

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

Вы должны использовать тег $ (this) , а затем тег .find image.

$(function(){

// Detect image orientation 
    $('.carousel-cell').each(function () {
    "use strict";
    
    var img = $(this).find("img");
    var imgWidth = $(img).attr('data-width');
    var imgHeight = $(img).attr('data-height');
    
    var className = imgWidth > imgHeight 
                    ? "landscape" 
                    : imgWidth < imgHeight
                      ? "portrait"
                      : "square"; 

     $(img).removeClass().addClass(className);
     
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-cell">
    <img src="domain.com" data-width="100" data-height="200" />
</div>
<div class="carousel-cell">
    <img src="domain.com" data-width="200" data-height="100" />
</div>
<div class="carousel-cell">
    <img src="domain.com" data-width="100" data-height="100" />
</div>
0 голосов
/ 02 октября 2018

В каждом цикле вы выбираете $("img"), что составляет каждые <img> на странице .

. Вам нужно ограничить свой поиск, чтобы найти img в пределахтекущий элемент, используя $(this).find("img") вместо. 

// Detect image orientation 
$('.carousel-cell').each(function() {
  "use strict";

  var $img = $(this).find('img');
  var w = parseInt($img.attr("data-width"));
  var h = parseInt($img.attr("data-height"));
  $img.removeClass();

  if (w > h) {
    $img.addClass('landscape');
  } else if (w < h) {
    $img.addClass('portrait');
  } else {
    $img.addClass('square');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span><strong>Right click on image > Inspect Element</strong> to see classes.</span>

<div class="carousel-cell">
  <img src="domain.com" data-width="100" data-height="200" />
</div>
<div class="carousel-cell">
  <img src="domain.com" data-width="200" data-height="100" />
</div>
<div class="carousel-cell">
  <img src="domain.com" data-width="100" data-height="100" />
</div>

РЕДАКТИРОВАТЬ: Я подозреваю, что из-за вашего комментария о странном поведении это просто потому, что вы не анализируете ширину и высоту как целые числаи, таким образом, > и < сравнения будут выполняться в алфавитном порядке .Например, "1000" будет меньше "800", потому что "1" < "8".Я добавил parseInt(), чтобы решить эту проблему.

...