我需要单击图像并链接到基于所单击产品的另一页,即使单击其他产品,我的页面也始终显示相同的产品。以下是主页的代码
<?php
$query = "SELECT * FROM tbl_product ORDER BY id ASC"; //order by ID ascending order
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
?>
<div id="products" class="productsContainer">
<div class="responsive"> <!-- OUTER BOX OF PRODUCT -->
<div class="gallery"> <!-- INNER BOX FOR PRODUCT -->
<a href="box.php?id=".$row['id']><img src="images/<?php echo $row["image"]; ?>" class="img-responsive" /></a><br /> <!-- IMAGE OF PRODUCTS -->
<h4 class="text-info"><?php echo $row["name"]; ?></h4> <!-- NAME OF PRODUCT -->
<h4 class="text-danger">$ <?php echo $row["price"]; ?></h4> <!-- PRODUCT PRICE -->
<input type="text" name="quantity" id="quantity<?php echo $row["id"]; ?>" class="form-control" value="1" /> <!-- QUANTITY PRODUCT -->
<input type="hidden" name="hidden_name" id="name<?php echo $row["id"]; ?>" value="<?php echo $row["name"]; ?>" /> <!-- NOT SHOWN -->
<input type="hidden" name="hidden_price" id="price<?php echo $row["id"]; ?>" value="<?php echo $row["price"]; ?>" /> <!-- NOT SHOWN -->
<input type="button" name="add_to_cart" id="<?php echo $row["id"]; ?>" style="margin-top:5px;" class="btn btn-warning form-control add_to_cart" value="Add to Cart" /> <!-- ADD TO CART BUTTON -->
</div>
</div>
</div>
<?php
}
?>
这是另一个页面代码(单击产品时)
<div class="containertype1">
<div>
<img id="mainImage" style="border:3px solid grey"
src=" images/005.jpg" height="500px" width="540x"/>
<br />
<div id="divId" onclick="changeImageOnClick(event)">
<?php
echo "<img class='imgStyle' src='images/001.jpg' />";
echo "<img class='imgStyle' src='images/002.jpg' />";
echo "<img class='imgStyle' src='images/003.jpg' />";
echo "<img class='imgStyle' src='images/004.jpg' />";
echo "<img class='imgStyle' src='images/005.jpg' />";
?>
</div>
<script type="text/javascript">
var images = document.getElementById("divId")
.getElementsByTagName("img");
for (var i = 0; i < images.length; i++)
{
images[i].onmouseover = function ()
{
this.style.cursor = 'hand';
this.style.borderColor = 'red';
}
images[i].onmouseout = function ()
{
this.style.cursor = 'pointer';
this.style.borderColor = 'grey';
}
}
function changeImageOnClick(event)
{
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG")
{
mainImage.src = targetElement.getAttribute("src");
}
}
</script>
</div>
</div>
最佳答案
问题是您在尝试编写PHP变量($row['id']
)之前忘记使用打开的PHP标记。
考虑以下:
<a href="box.php?id=".$row['id']>
<img src="images/<?php echo $row["image"]; ?>" class="img-responsive" />
</a>
在上面,您的链接指向
box.php?id=
。您实际上从未打开过PHP标记来引用$row['id']
。当HTML到达点时,它会感到困惑,因为它期望<a>
标签的属性(例如href
)。要解决此问题,只需确保打开(和关闭)PHP标记,并以以下格式回显
$row['id']
:<a href="box.php?id=<?php echo $row['id']; ?>">
<img src="images/<?php echo $row["image"]; ?>" class="img-responsive" />
</a>