我需要单击图像并链接到基于所单击产品的另一页,即使单击其他产品,我的页面也始终显示相同的产品。以下是主页的代码

        <?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>

10-05 23:03
查看更多