我试图显示使用php中的while循环从数据库中获取的特定单击的图像（单击html页面中的图像时会显示完整的弹出屏幕），但由于该图像位于while循环内，因此我无法显示该特定图像。我得到的结果是，当我单击第一个图像时，我可以根据需要显示第一个图像，但无法显示其余图像，我想我在img标签中输入的ID仅可通过第一张图片。由于它在while循环内，所以我认为可以给id相同是可以的，但是我错了。我该如何解决这个问题？我尝试在while循环内递增$ i变量，但无法在javascript中实现$ i。或者，还有更好的方法？这是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel = "stylesheet" type = "text/css" href = "accounts.css">
</head>
<body>
<?php
$servername = 'localhost';
$user = 'root';
$passwords = '';
$dbname = 'project';
$conn = new mysqli($servername, $user, $passwords, $dbname);
if($conn->connect_error)
{
die("Could not connect... ".$conn->connect_error);
}
$sql = "SELECT photo_url FROM photo WHERE username = '$username'";
$result = $conn->query($sql);
if($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
echo "<span id = 'photos'>";
echo "<img id = 'myProfile1' src = '".$row['photo_url']."' alt = 'photo' width = 190px' height = '200px' style = 'border: 1px solid #aaaaaa;'>";
echo "</span>";
echo "<div id = 'popUp1' class = 'pop'>";
echo "<span class = 'close1'>×</span>";
echo "<img class = 'pop-content' id = 'img02'>";
echo "</div>";
}
}
else
{
echo "<p>You haven't uploaded any photo.</p>";
}
$conn->close();
?>
<script>
var pop1 = document.getElementById('popUp1');
var img1 = document.getElementById('myProfile1');
var popImg1 = document.getElementById('img02');
img1.onclick = function()
{
pop1.style.display = 'block';
popImg1.src = this.src;
}
var span1 = document.getElementsByClassName('close1')[0];
span1.onclick = function()
{
pop1.style.display = 'none';
}
</script>
</body>
</html>
先感谢您。
我没有测试过，因为我没有运行PHP安装程序。但是我认为解决此问题的一种方法可能是这样的：
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel = "stylesheet" type = "text/css" href = "accounts.css">
</head>
<body>
<?php
$servername = 'localhost';
$user = 'root';
$passwords = 'root';
$dbname = 'project';
$conn = new mysqli($servername, $user, $passwords, $dbname);
if($conn->connect_error)
{
die("Could not connect... ".$conn->connect_error);
}
$sql = "SELECT photo_url FROM photo WHERE username = '$username'";
$result = $conn->query($sql);
if($result->num_rows > 0)
{
$i=0;
while($row = $result->fetch_assoc())
{
$i++;
echo "<span id = 'photos'>";
echo "<img onClick='showImage(" . $i . ")' id = 'myProfile" . $i . "' src = '".$row['photo_url']."' alt = 'photo' width = 190px' height = '200px' style = 'border: 1px solid #aaaaaa;'>";
echo "</span>";
echo "<div id = 'popUp" . $i . "' class = 'pop1'>";
echo "<span class = 'close1' onClick='closeImage(" . $i . ")'>×</span>";
echo "<img class = 'pop-content' id = 'img" . $i . "'>";
echo "</div>";
}
}
else
{
echo "<p>You haven't uploaded any photo.</p>";
}
$conn->close();
?>
<script>
function showImage(intId) {
var pop1 = document.getElementById('popUp'+intId);
var img1 = document.getElementById('myProfile'+intId);
var popImg1 = document.getElementById('img'+intId);
pop1.style.display = 'block';
popImg1.src = img1.src;
}
function closeImage(intId) {
var pop1 = document.getElementById('popUp'+intId);
pop1.style.display = 'none';
}
</script>
</body>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句