Question

我有4张图片，我想逐一展示模态。首先我显示一个图像，并且有一个按钮可以在单击图像时更改图像。它不起作用。我需要解决方案..非常感谢..这是我的页面的例子 example 这是我的代码;

<?php
$x="select * from tbbarang where idbarang='$r[idbarang]'";
$xx=mysqli_query($koneksi, $x);
$hasill=mysqli_fetch_array($xx);
?>
<img width="300px" height="150px" id="myImage<?php echo $i?>"    src="<?php echo $hasill['gmbr1'] ?>"> <br> <br>
<button class="btn btn-warning" onclick="changeImage(<?php echo $i?>)">Click to View Other Images</button>
<script>
   function changeImage(idd) {
    var image = document.getElementById("myImage"+idd);
    if (image.src.match("<?php echo $hasill['gmbr4'] ?>"))
   {
     image.src = "<?php echo $hasill['gmbr1'] ?>"; 

    } 
   else if (image.src.match("<?php echo $hasill['gmbr1'] ?>"))
   {
     image.src = "<?php echo $hasill['gmbr2'] ?>"; 

   }
   else if (image.src.match("<?php echo $hasill['gmbr2'] ?>"))
   {
     image.src = "<?php echo $hasill['gmbr3'] ?>"; 

   }

   else if (image.src.match("<?php echo $hasill['gmbr3'] ?>"))
   {
     image.src = "<?php echo $hasill['gmbr4'] ?>";


   }
   }
</script>

Answer 1

您对$hasill=mysqli_fetch_array($xx);的使用似乎不正确。

试试这个：

$hasill=mysqli_fetch_array($xx,MYSQLI_ASSOC);

Answer 2

你不应该做SELECT *，总是指定你需要拉的列。

函数中的Console.log（image.src）

   function changeImage(idd) {
    var image = document.getElementById("myImage"+idd);
    console.log(image.src);

我打赌那里有一堆http：//并且浏览器添加了你在回显的图像src中没有的内容。将代码修改为以下内容：

<img width="300px" height="150px" id="myImage<?php echo $i?>" data-currentimage=<?php echo $i; ?>   src="<?php echo $hasill['gmbr1'] ?>"> <br> <br>
<button class="btn btn-warning" onclick="changeImage(<?php echo $i?>)">Click to View Other Images</button>
<script>
   var imageGallery = [
     <?php echo  json_encode($hasill['gmbr1']); ?>
     ,<?php echo json_encode($hasill['gmbr2']); ?>
     ,<?php echo json_encode($hasill['gmbr3']); ?>
     ,<?php echo json_encode($hasill['gmbr4']); ?>
   ];

   function changeImage(idd) {
    var image = document.getElementById("myImage"+idd);
    var currentImageIndex = (image.dataset['currentimage'] + 1) % imageGallery.length;
    image.src = imageGallery[currentImageIndex];
    image.dataset['currentimage'] = currentImageIndex;
   }
</script>

如果您的情况允许，您可以跳过内联函数调用并执行此操作

<img width="300px" height="150px" id="galleryImageViewer" data-currentimage=<?php echo $i; ?> src="<?php echo $hasill['gmbr1'] ?>"> <br> <br>
<button id="galleryChanger" class="btn btn-warning">Click to View Other Images</button>
<script>
   var imageGallery = [
     <?php echo  json_encode($hasill['gmbr1']); ?>
     ,<?php echo json_encode($hasill['gmbr2']); ?>
     ,<?php echo json_encode($hasill['gmbr3']); ?>
     ,<?php echo json_encode($hasill['gmbr4']); ?>
   ];
   var galleryImageViewer = document.getElementById('galleryImageViewer');
   document.getElementById("galleryChanger").addEventListener('click',function() {
     changeImage(galleryImageViewer);
   });
   function changeImage(image ) {
    var currentImageIndex = (image.dataset['currentimage'] + 1) % imageGallery.length;
    image.src = imageGallery[currentImageIndex];
    image.dataset['currentimage'] = currentImageIndex;
   }
</script>

单击时使用javascript更改图像。但为什么它不能很好地运作？

2 个答案: