我正在为一个假商店网站制作一个“目录”页面,当我单击页面上显示的缩略图之一时,java-script 覆盖旨在显示产品的所有信息(例如更大的图像' photo1') 与该缩略图(产品在 SQL 数据库中)。
虽然这确实会按预期拉出叠加层,但它不会只获得一个相关的“photo1”,而是从表格中获取所有这些。
我得到了老师的帮助,但她甚至帮不上忙,但据我所知,我需要一种方法来存储选择的缩略图,以便我可以澄清要为覆盖拉取哪些信息。
主要的:
<div id="overlay">
<div>
<?php
include 'includes/connection.php';
try {
$sql = 'SELECT * FROM item;';
$resultSet = $pdo->query($sql);
} // end try
catch (PDOException $e) {
echo 'Error fetching items: ' . $e->getMessage();
exit();
} // end catch
foreach ($resultSet as $row) {
// put each rows's elements into variables
$itemName = $row['itemName'];
$unitPrice = $row['unitPrice'];
$qtyOnHand = $row['qtyOnHand'];
$thumbNail = $row['thumbNail'];
$photo1 = $row['photo1'];
echo '<td><img src="' .$photo1 .'" width="500" height="500" alt="$itemName" title="$itemName" ></td>';
}
?>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<div id="MainHolder">
<div id="Headerbar">
<?php
include 'includes/login.php';
?>
<div class="ContentBody">
<div class="Content">
<article>
<h2>Store</h2>
<?php
include 'includes/connection.php';
try
{
$sql = 'SELECT * FROM item;';
$resultSet = $pdo->query($sql);
} // end try
catch (PDOException $e)
{
echo 'Error fetching items: ' . $e->getMessage();
exit();
} // end catch
?>
<!-- open table -->
<article>
<?php
// read result set and populate table
foreach ($resultSet as $row)
{
// put each rows's elements into variables
$itemName = $row['itemName'];
$thumbNail = $row['thumbNail'];
$qtyOnHand = $row['qtyOnHand'];
// test for out of stock condition
// if no stock, display out of stock image else display add to cart image
if ($qtyOnHand <= 0) {
echo '<td><img src="images/outOfStock.png" border="3" class="floatingImage" height="80" width="80" alt="" title=""></td>';
} else {
echo '<td><img class="floatingImage" border="3" src="' .$thumbNail .'" width="80" height="80" alt="' .$itemName .'" title="' .$itemName .'" onclick="overlay()" ></td>';
}
} // end foreach
// close table
echo '</article>';
?>
</article>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
Javascript:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
覆盖和目录在同一个文件中。我还在学习,所以对于任何混乱的格式/代码,我深表歉意。
编辑:我已经合并了一些代码,这几乎显示了我的整个商店页面,除了标题,等等......