如何在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');
    }
  });
});