如何在PHP foreach循环中使用jQuery .each()?

时间:2019-04-16 00:03:38

标签: javascript php jquery html

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

问题是if函数获取数组中第一张图像的.width().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');
    }
  });
});

1 个答案:

答案 0 :(得分:0)

您仅获得第一张图像的宽度/高度,因为它们不在功能范围内。您需要从每个图像获取宽度/高度,因此需要将其放入foreach循环中。 另外,不将其设置为变量会更有效,因为每个图像只使用一次宽度和高度。

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

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