Question

我试图使用从数据库中检索到的缩略图。 PHP工作正常并显示我的缩略图。我不知道如何将数据库中的id转换为imageID for JavaScript函数和getElementById，以便在单击时显示为完整大小。我可以在我的代码中直接使用JavaScript内联onsubmit。内联JavaScript正在运行;正在显示缩略图，单击时会显示完整大小，但我想使用我的数据库检索到的图像在单击时显示完整大小的图像。你觉得你能帮我解决我的代码吗？

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
    //function that shows full sized image of the thumbnail 
        function showImage(imageID) {
        //first hide all images
   document.getElementById('image1').style.display = 'none';
   //then display the one that had its thumbnail clicked.
        document.getElementById(imageID).style.display = '';
    }
</script>
</head>

<body>
<h1></h1>


<?php

$host = "localhost";
$user = "root";
$pass = "";
$database = "travel1";

$conn = new mysqli($host, $user, $pass, $database);

if ($conn->connect_error) 
    die ("Unable to connect to database: " . $conn->connect_error );

$sql = "select * from what_to_do
    where DESTINATION='NEW YORK CITY'";
$result = $conn->query($sql);

if ($result->num_rows >= 0) {
    echo "<table>";
        while($row = $result->fetch_assoc()) {
            echo "<td>".$row["THUMBNAIL"]."</td>";
        }
        echo "</table>";
}   
else {
        echo "You have no destinations";
}
$conn->close(); 
?>
<p>
<img id="image1" alt="" src="images/NewYork/Pick7/9-11show.jpg"
    style="display: none" />
</p>
<p>
<img alt="" src="="images/NewYork/Pick7/9-11thumb.JPG"style="width:100px;
 height:100px" onclick="showImage('image1')" />       
</p>

Answer 1

在此代码中，第二个img标记过早关闭，如src =＆＃34;某些内容＆＃34;如果该标签形成正确，我认为这应该有效吗？

否则，你会做类似＆＃34; SRC =＆＃34; /嗒嗒＆＃34; /＆GT;

希望能回答你的问题？

然后对于我的onclick函数，基本上做同样的事情。

Answer 2

我会假设很多，但是这里去了！

上面的答案是正确的，你过早关闭了代码底部的图片代码，它应该是这样的：

<img alt="" src="images/NewYork/Pick7/9-11thumb.JPG" style="width:100px;
 height:100px;" onclick="showImage('image1')" />

但除此之外还有其他一些问题要解决......

首先，通过在每个页面上为每个查询键入目标的特定名称，您将失去使用数据库的目的！就像你提到的那样，你需要使用ID并相应地提取数据。

要执行此操作，您需要通过让用户在上一页/部分中选择目的地来定义ID是什么（在您的示例中，目的地列表可能适用于某种顺序的所有目的地，即提升或者下降等...... PHP有几种不同的方式。）

首先，按ID排序的查询是：

SELECT * FROM travel1 order by id desc

然后在单击目标链接时在URL中设置ID，这是使用php将ID带到下一页的示例链接：

<a href="/destination-info.php?id=<?php echo $rows['id']; ?>">more info</a>

到达目标信息页面（即我打电话给您的上述代码后），过滤您的数据，以便您可以通过ID首先将其添加到您的页面来访问特定目的地（在您连接到数据库之后：

<?php
if(isset($_GET['id'])){
        $id = preg_replace('#[^0-9]#i', '',$_GET['id']);
        $result = $con->query("SELECT * FROM travel1 WHERE id='$id' ");
        while($rows = $result->fetch_assoc()) {
        echo "<td>".$row["THUMBNAIL"]."</td>"; 
         }

         } else { 
 echo "We're having some issues..."; 
}
?>

上面的代码将从您从上一页（您的新目的地列表）转移的URL中获取数据库ID，并且可以像其他链接一样回显，例如：

'echo "<td>".$row["THUMBNAIL"]."</td>";'

我希望这有帮助！ = D

尝试使用php和数据库检索缩略图显示完整大小的图像

2 个答案: