Closed. This question needs to be more focused。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
                
                    4年前关闭。
            
        

    

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


这是我要单击它会更改的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>


我怎样才能做到这一点?

最佳答案

哇,您不能立即从服务器上执行此操作。你需要


将所有可能的图像分配到某个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']); );
        }

09-10 12:07
查看更多