单击图像并在另一个页面中显示关于它的信息

我需要单击图像并根据点击的产品链接到另一个页面，即使当我点击其他产品时，我的页面也始终显示相同的产品。 下面是主要的页面单击图像并在另一个页面中显示关于它的信息

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

来源

2017-07-25 Mr_Andrew

的问题是，你忘了使用开放的PHP标签在尝试写一个PHP变量（$row['id']）之前。

考虑以下几点：

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

来源

2017-07-25 04:04:03

太感谢你了！非常有帮助和很好解释的答案！ –

单击图像并在另一个页面中显示关于它的信息

回答

相关问题