javascript - 使用PHP复制div并随机化

Question

我将 ACF 与 WordPress 结合使用来循环显示一组图像:

<div class="logos">
  <?php if (have_rows('logos')) : while (have_rows('logos')): the_row();
      $image  = get_sub_field('logo');
      $link   = get_sub_field('logo_link');
      ?>
      <div class="img"><a target="_blank" href="<?php echo $link; ?>"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></a></div>
    <?php endwhile; endif; ?>
</div>

我想知道是否可以将 logos 的 div 重复 4 次，然后随机化图像循环的返回？不确定 PHP 是否可以实现这一点，或者 jQuery 是否是更好的方法？

Answer 1

是的，这是可能的!您可以使用 get_field，而不是使用 have_rows。结果是一个数组。然后你可以使用 php 的 rand函数和 foreach 循环遍历数组。

查看此ACF示例 enter link description here用于击球手的理解。

我没有检查下面示例中 get_field 的确切输出，但您会明白的:)

<?php

$images = get_field( 'logos' );
$images1 = rand( $images );
$images2 = rand( $images );
$images3 = rand( $images );
$images4 = rand( $images );

?>

<div class="logos">
    <?php foreach ( $images1 as $image ) : ?>
        <div class="img"><a target="_blank" href="<?php echo $image['logo_link']; ?>"><img src="<?php echo $image['logo']['url']; ?>" alt="<?php echo $image['logo']['alt']; ?>"></a></div>
    <?php endforeach; ?>
</div>

<div class="logos">
    <?php foreach ( $images2 as $image ) : ?>
        <div class="img"><a target="_blank" href="<?php echo $image['logo_link']; ?>"><img src="<?php echo $image['logo']['url']; ?>" alt="<?php echo $image['logo']['alt']; ?>"></a></div>
    <?php endforeach; ?>
</div>

<div class="logos">
    <?php foreach ( $images3 as $image ) : ?>
        <div class="img"><a target="_blank" href="<?php echo $image['logo_link']; ?>"><img src="<?php echo $image['logo']['url']; ?>" alt="<?php echo $image['logo']['alt']; ?>"></a></div>
    <?php endforeach; ?>
</div>

<div class="logos">
    <?php foreach ( $images4 as $image ) : ?>
        <div class="img"><a target="_blank" href="<?php echo $image['logo_link']; ?>"><img src="<?php echo $image['logo']['url']; ?>" alt="<?php echo $image['logo']['alt']; ?>"></a></div>
    <?php endforeach; ?>
</div>

或者使用for循环:

<?php $images = get_field( 'logos' ); ?>

<?php for ( $i = 1; $i <= 4; $i++ ) : $randImages = rand( $images ); ?>
    <div class="logos">
        <?php foreach ( $randImages as $image ) : ?>
            <div class="img"><a target="_blank" href="<?php echo $image['logo_link']; ?>"><img src="<?php echo $image['logo']['url']; ?>" alt="<?php echo $image['logo']['alt']; ?>"></a></div>
        <?php endforeach; ?>
    </div>
<?php endfor; ?>