javascript onclick to change image cannot work well

问题

i have two data and each data has 4 images that i want to show one by one, i want to swap the image by clicking button using onclick javascript. but it doesn't work well to all data, just work to end of data. this is my code ;

<?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>
   <script>
    function changeImage(id) {
        var image = document.getElementById("img"+id);
        if (image.src.match("<?php echo $row['gmbr1']?>")) {
            image.src = "<?php echo $row['gmbr2']?>";
        } else if (image.src.match("<?php echo $row['gmbr2']?>")) {
            image.src = "<?php echo $row['gmbr3']?>";
        } else if (image.src.match("<?php echo $row['gmbr3']?>")) {
            image.src = "<?php echo $row['gmbr4']?>";
        } else if (image.src.match("<?php echo $row['gmbr4']?>")) {
            image.src = "<?php echo $row['gmbr1']?>";
        }
    }   
    </script>
   <td><button id="ubah" onClick="changeImage(<?php echo $i?>)">Click To Change</button></td>
   </tr>
   <?php
   $i=$i+1;
}
?>

</table> 
</body>
</html>

回答1:

your file may contain no of changeimage functions change your code like this

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

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

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

</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))
{ 
    $gmbr1 = $row['gmbr1'];
    $gmbr2 = $row['gmbr2'];
    $gmbr3 = $row['gmbr3'];
    $gmbr4 = $row['gmbr4'];

?>



   <tr>
   <!--image 1--> <td><img id="img<?php echo $i?>" src=" <?php echo $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 $gmbr2 ?>"></td>
   <!--image 3--> <td><img src="<?php echo $gmbr3 ?>"></td>
   <!--image 4--> <td><img src="<?php echo $gmbr4 ?>"></td>

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

</table> 
</body>
</html>

来源：https://stackoverflow.com/questions/33296602/javascript-onclick-to-change-image-cannot-work-well

标签

javascript

onclick