我创建了产品展示页面。每行显示4个产品。我有7个产品上传到数据库中。因此，如果我单击特定产品，请打开模式并显示我单击的产品的详细信息。我不明白如何获取特定产品的模态数据。这是我的下面的代码。请帮助我。
我在这里将数据提取到产品展示中。
double total = 0.0;
//do something for total, anyway
return total < 10E-6 ? 0 : (1.0 / total);
这是我显示产品详细信息的模式。
<div class="row">
<div class="position-relative">
<?php
$sql = "SELECT * FROM wm_products";
$result = $conn->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
?>
<!-- start team item -->
<div class="col-md-3 padding-15px-lr team-block text-left team-style-1 md-margin-40px-bottom wow fadeInUp">
<div class="agileinfo_new_products_grid">
<div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
<div class="hs-wrapper hs-wrapper1">
<img src="products_images/<?php echo $row['pro_img']; ?>" alt=" " class="img-responsive" />
</div>
<p style="height:40px;"><a href="single.html"><?php echo $row['pro_name']; ?></a></p>
<div class="simpleCart_shelfItem">
<p><i class="item_price"><?php echo $row['pro_price'];?></i></p>
<p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" dataid="<?php echo $row['pro_id']; ?>">View</a></p>
</div>
</div>
</div>
</div>
<!-- end team item -->
<?php
}
}
?>
</div>
</div>
答案 0 :(得分：0)
在产品展示中，尝试在下面的行中将data-id更改为href
<p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" dataid="<?php echo $row['pro_id']; ?>">Add to cart</a></p>
拥有
<p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" href="#modal<?php echo $row['pro_id']; ?>">Add to cart</a></p>
然后将您的模式更新ID属性设置为
<div id="#modal<?php echo $row['pro_id']; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
我还假设您的模式显示数据也位于while语句内，或者您已经为其创建了while语句。
所以最后您应该拥有：
<div class="row">
<div class="position-relative">
<?php
$sql = "SELECT * FROM wm_products";
$result = $conn->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
?>
<!-- start team item -->
<div class="col-md-3 padding-15px-lr team-block text-left team-style-1 md-margin-40px-bottom wow fadeInUp">
<div class="agileinfo_new_products_grid">
<div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
<div class="hs-wrapper hs-wrapper1">
<img src="products_images/<?php echo $row['pro_img']; ?>" alt=" " class="img-responsive" />
</div>
<p style="height:40px;"><a href="single.html"><?php echo $row['pro_name']; ?></a></p>
<div class="simpleCart_shelfItem">
<p><i class="item_price"><?php echo $row['pro_price'];?></i></p>
<p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" href="#modal<?php echo $row['pro_id']; ?>">Add to cart</a></p>
</div>
</div>
</div>
</div>
<!-- end team item -->
<!-- corresponding modal -->
<div id="#modal<?php echo $row['pro_id']; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $row['pro_name'];?></h4>
</div>
<div class="modal-body product_detail">
<div class="col-md-5 modal_body_left">
<img src="../products_images/<?php echo $row['pro_img']; ?>" alt=" " class="width-azset img-responsive">
</div>
<div class="col-md-7 modal_body_right">
<h4><?php echo $row['pro_name'];?></h4>
<p><?php echo $row['pro_dis'];?></p>
<div class="modal_body_right_cart simpleCart_shelfItem">
<p><i class="item_price"><?php echo $row['pro_price'];?></i></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="modal-footer">
<button type="submit" name="Add_Cart" class="btn btn-success">Add to Cart</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- corresponding modal end -->
<?php
}
}
?>
</div>
</div>
</div>
答案 1 :(得分：0)
您可以使用php jQuery / ajax和JavaScript来做到这一点：
因此，如果您将锚标签更改为以下内容：
<p><a href="#PRODUCT_DETAILS" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" data-id="<?php echo $row['pro_id']; ?>">Add to cart</a></p>
然后从有问题的锚标记中获取数据ID，并使用jquery ajax php执行以下操作，获取该产品的相关详细信息：
$('#PRODUCT_DETAILS').on('show.bs.modal', function (e) {
var productID= $(e.relatedTarget).data('id');
$.ajax({
url:"fetchProductDetails.php",
method: "POST",
data:{productID:productID},
dataType:"JSON",
success:function(data)
{
$('#proPrice').text(data.price);
$('#proName').text(data.name);
$('#proNameTitle').text(data.name);
$('#proDesc').text(data.description);
$('#proImage').html(data.img);
}
})
});
创建一个php文件，该文件将获取所有产品详细信息，如下所示：
require 'database.php';
if (isset($_POST['productID'])) {
$productID = $_POST['productID'];
$query = $conn->prepare('SELECT * FROM products WHERE id=:productID');
$query->execute(array(':productID' => $productID));
if ($query->rowCount() > 0) {
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
$data['description'] = $row['pro_dis'];
$data['name'] = $row['pro_name'];
$data['price'] = $row['pro_price'];
$img = $row['pro_img'];
$data['img'] = "<img src='../products_images/".$img."' alt='' class='width-azset img-responsive'>";
}
echo json_encode($data);
}else{
echo "<h1>" . "Error 404 Page" . "</h1>";
}
}
然后在模态中，您可以通过执行以下操作来显示此信息：
<div id="PRODUCT_DETAILS" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 id="proNameTitle"></h4>
</div>
<div class="modal-body product_detail">
<div class="col-md-5 modal_body_left">
<span id="proImage"></span>
</div>
<div class="col-md-7 modal_body_right">
<h4 id="proName"></h4>
<p id="proDesc"></p>
<div class="modal_body_right_cart simpleCart_shelfItem">
<p id="proPrice"></i></p>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="modal-footer">
<button type="submit" name="Add_Cart" class="btn btn-success">Add to Cart</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
稍作修改以符合您的要求。