javascript - 单击图像并显示在另一个页面中

Question

我需要点击图片并根据点击的产品链接到另一个页面，即使我点击其他产品，我的页面也总是显示相同的产品。 下面是主页面的代码

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

Answer 1

问题是您在尝试编写 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>