如何更改php img與另一個php img使用onclick

Question

我有一個img，我使用php添加到頁面 - 從數據庫。 我想從基於'onclick'的數據庫中將其更改爲另一個img，這意味着我想更改之前創建的標記中的img。

這裏是對象的代碼，我想改變

<?php 
    include("dbAccess.php"); 
    $sql = "SELECT * FROM tbl_bigImg_202 where id=6"; //query string 
    $result = $connection -> query($sql); 
    if ($result -> num_rows > 0) { 
     // output data of each row 
     while($row = $result -> fetch_assoc()){ 
      echo '<img id="mainPants" src="' . $row['img'] . '"/>'; 
     } 
    } 
?> 

下面是我想點擊它會改變

<?php 
    $sql = "SELECT * FROM tbl_smallImg_202"; //query string 
    $result = $connection -> query($sql); 
    if ($result -> num_rows > 0) { 
     // output data of each row 
     while($row = $result -> fetch_assoc()){ 
      if ($row['id'] == 5){ 
       echo '<img id="pBlack" onclick="changeImage(this)" src="' . $row['img'] . '"/>'; 
      } 
      if ($row['id'] == 7){ 
       echo '<img id="pPink" onclick="changeImage(this)" src="' . $row['img'] . '"/>'; 
      } 
      if ($row['id'] == 8){ 
       echo '<img id="pRed" onclick="changeImage(this)" src="' . $row['img'] . '"/>'; 
      } 
     } 
    } 
?> 

而且這裏的IMG是什麼，我想做

<script> 
      function changeImage(img) { 
      var newImg = document.getElementById('mainPants'); 
         <?php 
         $sql = "SELECT * FROM tbl_bigImg_202"; //query string 
         $result = $connection -> query($sql); 
         if ($result -> num_rows > 0) { 
         // output data of each row 

         while($row = $result -> fetch_assoc()){ 
           switch (img.id) { 
            case 'pBlack': 
             { 
             if($row['id'] == 5); 
              newImg.src= $row['img']; 
             } 
            break; 
            case 'pPink': 
            { 
             if($row['id'] == 7); 
              newImg.src= $row['img']; 
             } 
            break; 
            case 'pRed': 
            default: 
             { 
             if($row['id'] == 8); 
              newImg.src= $row['img']; 
             } 
           } 
         } 
        } 
         mysqli_close($connection); 
        ?> 
      } 
     </script> 

我該怎麼做？

Answer 1

哇哇，你不能從服務器馬上做到這一點。你需要或者

• 分配所有可能的圖像轉換成一些JavaScript變量，然後搞定，或
• 作出新的PHP腳本，將通過ajax在前端側通過JavaScript調用。

，因爲你的PHP腳本和問題並不能使它看起來像你已經編寫這個東西太長時間，我認爲選項1將是簡單了很多你

<?php 
    include("dbAccess.php"); 
    $sql = "SELECT * FROM tbl_bigImg_202"; //query string 
    $result = $connection -> query($sql); 
    $all_images = array(); 
    if ($result -> num_rows > 0) { 
     // assign the imag 
     while($row = $result -> fetch_assoc()){ 
      array_push($all_images, $row['img']); 
     } 
    } 
    ... 

在這一點上，變量$all_images將有一個數據庫中所有圖像的列表，現在你可以將這些信息推送到前端，例如像這樣（不確定你的項目結構/框架，所以我只會回顯它我走了）

... 
    echo("<script type='text/javascript'>". 
     "var all_images=[".implode(',', $all_images)."];" //implode functino glues variables from an array into a string via a glue you define. we use comma for the javascript array 
    ."</script>"); 
    ... 

現在您可以定義一個javascript函數，該函數將img設置爲存在於all_images javascript數組中的另一個圖像。也許這樣

var current_image_index_in_use=0; //global variable 
function changeImage(dom_element){ 
    //loop through image indices 
    current_image_index_in_use++; 
    if(current_image_index_in_use>=all_images.length){ 
     current_image_index_in_use=0; 
    } 

    var image_to_use=all_images[current_image_index_in_use]; 

    dom_element.src = img.src=image_to_use; 
} 

現在你準備寫這個你<img />

<img onclick="changeImage(this)" src="..some initial image.."/> 

，如果你想改變圖像的ID，以及，你可以改變all_images所以它沒有隻有圖像的src信息，但也是其相關的ID。我強烈建議不要像你在你的例子中那樣做if ($row['id'] == 5){$id="pPink" ...。相反，在數據庫中創建一個新列，將存儲此信息並將其自動返回到二維數組中，如

 while($row = $result -> fetch_assoc()){ 
      array_push($all_images, array($row['img'], $row['my_dom_id']);); 
     }