Question

我有两个数据，每个数据有4个图像，我想逐个显示。我想通过使用onclick javascript点击按钮来交换图像。

它不适用于所有数据，只是处理结束数据。

<?php
include "koneksi.php"; // connect to database

?>
<html>
<head>
<title></title>
<style>
    img{
        height:100px;
        width:100px;
    }
</style>

</head>
<body>
<table>
<?php
$result=mysqli_query($koneksi, "SELECT * FROM tbbarang where idbarang='43' or idbarang='44'");
$i= 1;
while ($row=mysqli_fetch_array($result))
{ ?>
   <tr>
   <!--image 1--> <td><img id="img<?php echo $i?>" src=" <?php echo $row['gmbr1'] ?>"></td> <!-- image that i want to swap with folowing images 1, image 2, image 3, image 4-->
   <!--image 2--> <td><img src="<?php echo $row['gmbr2'] ?>"></td>
   <!--image 3--> <td><img src="<?php echo $row['gmbr3'] ?>"></td>
   <!--image 4--> <td><img src="<?php echo $row['gmbr4'] ?>"></td>

   <td><button id="ubah" onClick="changeImage(<?php echo $i?>, <?php echo $row['gmbr1']?>, <?php echo $row['gmbr2']?>, <?php echo $row['gmbr3']?>, <?php echo $row['gmbr4']?>)">Click To Change</button></td>
   </tr>
   <?php
   $i=$i+1;
}
?>

</table> 
<script>
    function changeImage(id, gmbr1, gmbr2, gmbr3, gmbr4) {
        var image = document.getElementById("img"+id);
        if (image.src.match(gmbr1)) {
            image.src = gmbr2;
        } else if (image.src.match(gmbr2)) {
            image.src = gmbr3;
        } else if (image.src.match(gmbr3)) {
            image.src = gmbr4;
        } else if (image.src.match(gmbr4)) {
            image.src = gmbr1;
        }
    }   
</script>

</body>
</html>

onClick javascript用于更改图像

0 个答案: