javascript - 如何使用 onclick 将 php 图像更改为另一个 php 图像

Question

我有一个使用 php 从数据库添加到页面的 img。 我想将其更改为基于“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'] . '"/>';
        }
    }   
?>

这是我想点击它会改变的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'] . '"/>';
            }
        }
    }
?>

这就是我尝试做的

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