如何在PHP foreach循环中使用jQuery .each（）？

Question

我有一个foreach循环，其中包含一个图像数组和一个JS代码，用于添加不同的类，无论宽度是否大于其高度，反之亦然。

问题是if函数获取数组中第一个图像的.width()和.height()值，并将相同的类添加到.height()所有图像中。

我尝试使用.each() ，当我打印console.log()它给出了第一个图像的值，认识到还有更多，但没有添加特定类。

HTML：

<?php foreach ( $feedback as $feed ): ?>
  <img class="img" src="<?php echo $feed['pic']; ?>">
<?php endforeach; ?>

PHP：

<?php
  $feedback = [
    [
      'pic' => '1.jpg',
    ],
    [
      'pic' => '1.jpg',
    ],
    [
      'pic' => '1.jpg',
    ],
    [
      'pic' => '1.jpg',
    ],
  ]

JS（jQuery）：

$(document).ready(function() {
  var img = $('.img');
  var img_w = img.width();
  var img_h = img.height();
  img.each(function() {
    if ( img_w > img_h ) {
      $(this).addClass('port');
    } else {
      $(this).addClass('land');
    }
  });
});

Answer 1

您只获得第一个图像的宽度/高度，因为它们不在函数中。 您需要从每个图像中获取宽度/高度，因此您需要将其放在foreach循环内。 此外，由于每个图像只使用一次宽度和高度，因此不要将其变为变量更有效。

$(document).ready(function() {
  var img = $('.img');

  img.each(function() {
    if ( $(this).width() > $(this).height() ) {
      $(this).addClass('port');
    } else {
      $(this).addClass('land');
    }
  });
});