使用javascript更改點擊時的圖像。但爲什麼它不能正常工作？

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> 

如果情況允許的話，你可以跳過內聯函數調用和mysqli_fetch_array的第二個參數做到這一點

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