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

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

 <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>

“class=”img thumb detailModal“>*/？>
“alt=“”
class=“img thumb detailModal”id=“theImage”
style=“宽度：280px；高度：360px；位置：绝对；”>
“alt=“”
class=“img thumb detailModal”id=“theImage”
style=“宽度：280px；高度：360px；位置：绝对位置；可见性：隐藏；">
❮  
❯ 
var slideIndex=1；
var i=0；
函数plusDivs（n）
{
var i+=滑动指数；
document.getElementById（'theImage'）.src=“”；//$fetchImageArray[2]
} 

@

$fetchImageArray[2]

，如果我使用2而不是

$fetchImageArray[I]

它会更改图像，但我必须传递

$fetchImageArray[I]

，因为我正在数组中存储源路径，在这里我通过传递索引来检索它，但它不工作。如果它开始工作，那么代码就可以了

---

请指出我做错了什么。

你不应该像评论中所说的那样乱搞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>

img{
宽度：280px；
高度：360px；
位置：绝对位置；
}
.隐藏{
显示：无；
}
“alt=”“class=“img thumb detailModal hide”id=“theImage”>
你不能那样使用它

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

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

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

希望，我理解你的问题。
在阅读你的代码之前，我应该提到一件很多新程序员在使用PHP时不理解的事情。。。PHP是一个“预处理器”，它在服务器上运行，一旦它处理了文件，它就会将HTML发送到浏览器-在简单的PHP中没有双向通信-因此，例如在
plusDivs
函数中，
var i
的值与
$fetchImageArray[i]
中的
i
没有任何关系，虽然它在某些情况下可能会起作用，但它是错误的，特别是考虑到最佳实践。您应该阅读更多关于服务器和客户端脚本的内容。。。请做。。。
function plusDivs(n)
    {
        var i += slideIndex;
        var fetchImageArray = [
           @foreach ($fetchImageArray as $key => $image)
             {{$image.','}}
           @endforeach
        ]

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