javascript onclick更改图像无法正常工作 [英] javascript onclick to change image cannot work well
本文介绍了javascript onclick更改图像无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个数据，每个数据有4张图像，我想一张一张地显示，我想使用onclick javascript通过单击按钮来交换图像.但是它不适用于所有数据，仅适用于数据结束.这是我的代码；
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>
推荐答案
您的文件可能不包含changeimage函数，请按以下方式更改代码
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>
这篇关于javascript onclick更改图像无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
