javascript - 根据我数据库中的 id 将数据从 html 对象传递到另一个对象

Question

所以我有两个文件:index.php和details modal.php。在索引 .php 文件中，我设法创建一个动态对象，该对象显示存储在数据库中的产品的标题、价格和图像。那就是完美的。正如您在图像中看到的那样，每个产品都有一个按钮，上面写着 Detalles(详细信息)，该按钮是动态生成的。该按钮在页面顶部打开一个小窗口(称为detailsmodal.php)。我想根据我选择的产品显示其中的数据。我尝试从数据库调用数据，但它只能调用产品一的数据(这意味着如果我单击产品2，它仍然显示产品1的数据)我该如何解决这个问题？ 这是一些屏幕截图以及我的index.php 和detailsmodal.php 代码。

In this image on the left is what is shown on detailsmodal.php

In this image on the left is what is shown on index.php .

index.php

<?php
require_once'core/init.php';
include'includes/head.php';
?>
<!--Navegacion-->
<?php
include('includes/navigation.php');
?>
<!-- Cabecera-->
<?php
include('includes/headerfull.php');
?>
<!--left side bar-->
<?php
include('includes/leftbar.php');


?>
<?php
$sql =  "SELECT * FROM products WHERE featured = 1";
$featured= $db->query($sql);
?>



<!--Detalles-->


	
	<!--main content-->
	<div class="col-md-8">Main
	<div class="row">
		<h2 id="textoTitulo" class="text-center">Productos destacados</h2>
		<?php while($product= mysqli_fetch_assoc($featured)):?>
		
		<div class="col-md-3">
			<h4><?php echo $product['title']?></h4>
			<img src="<?php echo $product['image']?>" id="producto2"   imagenProducto" alt=<?php echo $product['title']?> class="img-thumb" />
			<p class="list-price text-danger">Precio del Mercado <s>₡<?php echo $product['list_price']?></s></p>
			<p class="price">Nuestro precio: ₡<?php echo $product['price']?></p>
			<button type="button" class="btn butn-sm btn-success" data-toggle="modal" data-target="#details-1">Detalles</button>
			<?php include('includes/detailsmodal.php');?>
			
		</div>
		<?php endwhile;?>
		
		</div>
	</div>
	<!--Detalles-->
	<?php

?>
<!--right-->
	<?php
	
include('includes/rightbar.php');
?>
	<!--pie-->
	<?php
include('includes/footer.php');
?>
	

详细信息模态.php

<div class="modal fade details-1" id="details-1" tabindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true">
	<div class="modal-dialog modal-lg">
	<div class="modal-content">
		<div class="modal-header">
			<button class="close" type="button" data-dismiss="modal" arial-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 class="modal-title text-center"><?php echo $product['title']?>
				
			</h4>
		</div>
		<div class="modal-body">
			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-6">
						<div class="center-block">
							<img src="images/products/planta1.png" alt="Levis Jeans" id="viewProducto" class="details img-responsive">
						</div>
					</div>
					<div class="col-sm-6"></div>
					<h4>Detalles</h4>
					<p><?php echo $product['description']?></p>
					<hr>
					<p>Precio :<?php echo $product['price']?></p>
					<p>Marca: N/A</p>
					<form action="add_cart.php" method="post">
						<div class="form-group">
							<div class="col-xs-3">
								<label for="quantity">Cantidad:</label>
								<input type="text" class="form-control" id="quantity" name="quantity">
								<p>Disponibles: 3</p>
							<div class="form-group">
							<label for="size"></label>
							Size:<select name="size" id="size" class="form-control">
								<option value="36">36</option>
								<option value="40">40</option>
								<option value="50">50</option>
								<option value="30">30</option>
							</select>
						</div>

							</div>
							
						</div>

					</form>
				</div>
			</div>
		</div>
		<div class="modal-footer">
		<button class="btn btn-default" data-dismiss="modal">Cerrar</button>
		<button class="btn btn-warning" type="submit"><img class="cartPNG" src="images/logos/cart.png"> Agregar a Carrito</button>
	</div>
	</div>
	
	</div>
</div>

Answer 1

因为您给所有模态都提供了相同的 id，所以它将始终调用具有相同 id 的第一个模态。只需查看更新后的代码。

<?php
require_once'core/init.php';
include'includes/head.php';
?>
<!--Navegacion-->
<?php
include('includes/navigation.php');
?>
<!-- Cabecera-->
<?php
include('includes/headerfull.php');
?>
<!--left side bar-->
<?php
include('includes/leftbar.php');


?>
<?php
$sql =  "SELECT * FROM products WHERE featured = 1";
$featured= $db->query($sql);
?>



<!--Detalles-->


	
	<!--main content-->
	<div class="col-md-8">Main
	<div class="row">
		<h2 id="textoTitulo" class="text-center">Productos destacados</h2>
		<?php while($product= mysqli_fetch_assoc($featured)):?>
		
		<div class="col-md-3">
			<h4><?php echo $product['title']?></h4>
			<img src="<?php echo $product['image']?>" id="producto2"   imagenProducto" alt=<?php echo $product['title']?> class="img-thumb" />
			<p class="list-price text-danger">Precio del Mercado <s>₡<?php echo $product['list_price']?></s></p>
			<p class="price">Nuestro precio: ₡<?php echo $product['price']?></p>
			<button type="button" class="btn butn-sm btn-success" data-toggle="modal" data-target="#details-<?php echo $product['id'];?>">Detalles</button>
			<?php include('includes/detailsmodal.php');?>
			
		</div>
		<?php endwhile;?>
		
		</div>
	</div>
	<!--Detalles-->
	<?php

?>
<!--right-->
	<?php
	
include('includes/rightbar.php');
?>
	<!--pie-->
	<?php
include('includes/footer.php');
?>



//modal.php file

<div class="modal fade details-1" id="details-<?php echo $product['id'];?>" tabindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true">
	<div class="modal-dialog modal-lg">
	<div class="modal-content">
		<div class="modal-header">
			<button class="close" type="button" data-dismiss="modal" arial-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 class="modal-title text-center"><?php echo $product['title']?>
				
			</h4>
		</div>
		<div class="modal-body">
			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-6">
						<div class="center-block">
							<img src="images/products/planta1.png" alt="Levis Jeans" id="viewProducto" class="details img-responsive">
						</div>
					</div>
					<div class="col-sm-6"></div>
					<h4>Detalles</h4>
					<p><?php echo $product['description']?></p>
					<hr>
					<p>Precio :<?php echo $product['price']?></p>
					<p>Marca: N/A</p>
					<form action="add_cart.php" method="post">
						<div class="form-group">
							<div class="col-xs-3">
								<label for="quantity">Cantidad:</label>
								<input type="text" class="form-control" id="quantity" name="quantity">
								<p>Disponibles: 3</p>
							<div class="form-group">
							<label for="size"></label>
							Size:<select name="size" id="size" class="form-control">
								<option value="36">36</option>
								<option value="40">40</option>
								<option value="50">50</option>
								<option value="30">30</option>
							</select>
						</div>

							</div>
							
						</div>

					</form>
				</div>
			</div>
		</div>
		<div class="modal-footer">
		<button class="btn btn-default" data-dismiss="modal">Cerrar</button>
		<button class="btn btn-warning" type="submit"><img class="cartPNG" src="images/logos/cart.png"> Agregar a Carrito</button>
	</div>
	</div>
	
	</div>
</div>