Question

我有一个img，我使用php添加到页面 - 来自DB。我想根据＆＃39; onclick＆＃39;将其更改为另一个来自DB的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脚本，将通过javascript在前端通过ajax调用。

因为你的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']); );
        }

如何使用onclick更改php img与另一个php img

1 个答案: