如何在 php 和 javascript 中使用 foreach 更改图像？答案

【问题标题】：How to change images using foreach in php and javascript?如何在 php 和 javascript 中使用 foreach 更改图像？
【发布时间】：2018-09-07 00:10:46
【问题描述】：

我想在按钮单击时更改图像。请检查我在做什么：

 <div>
 <?php $fetchImageArray = array();?>
   <?php foreach($photos as $photo): ?>
     <?php
       $fetchImageArray[] = $photo;
      ?>
   <?php /*<img src="<?= $product['image']; ?>" alt="<?= $product['title']; ?>" class="img-thumb-detailModal"> */?>

    <?php if($i == 0):?>
       <img  src="<?=$photo; ?>" alt="<?= $product['title']; ?>"
             class="img-thumb-detailModal" id="theImage"
             style="width:280px;height:360px;position:absolute;">

   <?php else:?>
       <img  src="<?=$photo; ?>" alt="<?= $product['title']; ?>"
             class="img-thumb-detailModal" id="theImage"
             style="width:280px;height:360px;position:absolute;visibility: hidden;">

  <?php endif;?>

  <?php
   $i++;
  endforeach;?>


  <a class="stackButton sx" onclick="plusDivs(-1)">&#10094;</a>  <!-- Right Button -->
  <a class="stackButton dx" onclick="plusDivs(1)">&#10095;</a> <!-- Right Button -->
</div>

<script>

var slideIndex = 1;
var i = 0;
function plusDivs(n)
{
    var i += slideIndex;

    document.getElementById('theImage').src="<?=$fetchImageArray[i];?>"; //$fetchImageArray[2]
} 
</script>

@$fetchImageArray[2]，如果我使用 2 而不是 $fetchImageArray[i]，它会更改图像，但我必须传递 $fetchImageArray[i]，因为我将源路径存储在一个数组中，在这里我通过传递索引来检索它但是然后它不工作。如果它开始工作，那么代码就可以了。

请提出我做错了什么。

【问题讨论】：

在尝试阅读您的代码之前，我应该提一下很多新程序员在使用 PHP 时不理解的一件事...... PHP 是一个“预处理器”，它是不是很重要服务器，一旦它处理了文件，它就会将 HTML 发送到浏览器 - 在简单的 PHP 中没有双向通信 - 例如在 plusDivs 函数中，var i 的值与 @ 没有任何关系987654327@$fetchImageArray[i]
您的代码虽然在某些情况下可能有效，但它是错误的，尤其是考虑到最佳实践。您应该阅读有关服务器和客户端脚本的更多信息...请这样做...

标签： javascript php jquery arrays laravel

【解决方案1】：

你不应该像 cmets 上所说的那样乱用 php 和 javascript，从你的代码中应该用 javascript/jquery 来完成，你可以有这样的想法：

<style>
  img {
    width:280px;
    height:360px;
    position:absolute;
  }
  .hide {
    display: none;
  }
</style>
<div>
   <?php foreach($photos as $photo): ?>
       <img src="<?=$photo; ?>" alt="<?= $product['title']; ?>" class="img-thumb-detailModal hide" id="theImage">
  <?php endforeach; ?>

  <a class="stackButton sx" onclick="plusDivs(-1)">&#10094;</a>  <!-- Left Button -->
  <a class="stackButton dx" onclick="plusDivs(1)">&#10095;</a> <!-- Right Button -->
</div>

<script>
  varar slideIndex = 1;
  showSlides(slideIndex);

  // Next/previous controls
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }

  function showDivs(n) {
    var i;
    var slides = document.getElementsByClassName("img-thumb-detailModal");
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slides[slideIndex-1].style.display = "block";
  }
</script>

我没有用我的代码进行测试，但你会有想法，更多信息你可以参考这个：https://www.w3schools.com/howto/howto_js_slideshow.asp

【讨论】：

【解决方案2】：

你不能那样使用它。

   function plusDivs(n)
    {
        var i += slideIndex;

        document.getElementById('theImage').src="<?=$fetchImageArray[i];?>"; //$fetchImageArray[2]
    }

因为，$fetchImageArray[i] 不存在。 PHP 不知道 javascript var i。

但是，你可以做一些小把戏。您将 $fetchImageArray 作为数组加载到 javascript。

你可以使用 laravel @foreach($array as $key => $element) 和 @endforeach，你不必每次都使用，甚至根本不需要使用。看Laravel Templates

function plusDivs(n)
    {
        var i += slideIndex;
        var fetchImageArray = [
           @foreach ($fetchImageArray as $key => $image)
             {{$image.','}}
           @endforeach
        ]

        document.getElementById('theImage').src=fetchImageArray[i];
    }

但是您应该检查您的“i 变量”是否在您的数组中。否则会有一些错误。

希望，我明白你的问题。

【讨论】：