如何使用onclick更改php图像与另一个php img [关闭]

Question

I have an img that I added to the page using php - from DB. I would like to change it to another img from the DB based on 'onclick' meaning I would like to change the img in the tag I created before.

Here is the code of the object I would like to change

<?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'] . '"/>';
        }
    }   
?>

Here are the img I would like to click that it would change

<?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'] . '"/>';
            }
        }
    }
?>

And here is what I tried to do

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

How can I do that?

Answer 1

woah woah, you cannot do this from server right away. you need either

• assign all the possible images into some javascript variable and then handle that, or
• make a new php script that will be called via ajax on frontend side via javascript.

since your php script and the question doesn't make it seem like you have coded this stuff for too long, i think option 1 will be a lot simpler for you

<?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'] );
        }
    }   
    ...

at this point, the variable $all_images will have a list of all of your images from the database, now you can push this information to the front-end, for example, like this (not really sure about your project sctructure/framework, so i will just echo it away i guess)

    ...
    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>");
    ...

now you can define a javascript function that set an img to a another image that is present in the all_images javascript array. maybe like this

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

now you are ready to write this to your <img />

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

if you would like to change the id of the image as well, you could change all_images so it would have not only image src information but also its relevant id. i strongly advice against doing if ($row['id'] == 5){$id="pPink" ... like you do in your example. rather, create a new column in the database that will have this information stored and return it automatically into a two dimensional array, like

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