如何使用 php 和 mysql 在单行引导滑块中获取不同的数据结果
Posted
技术标签:
【中文标题】如何使用 php 和 mysql 在单行引导滑块中获取不同的数据结果【英文标题】：how can i fetch different data results in single row of bootstrap slider using php and mysql 【发布时间】：2018-01-13 01:37:42 【问题描述】：我想通过从 mysql 获取数据来使用 php 创建一个动态引导滑块。我面临的问题是我在单排幻灯片中获得所有类似的产品。如何在单行幻灯片中获取多个数据。我想在 bootstrap 的不同列中显示不同的产品。在这个滑块中，它包含两类 js，分别是 item 和 item active。我在项目和项目上单独获得相同的图像，但作为单独的滑块，它们都显示不同的图像。我想在所有类的不同列中获取所有不同的数据。 ...FYR 我已经包含了我的图片
<div class="row msp" id="most-sold"><!--most sold product slider-->
<h3/>Most Sold out Products</h3>
<?php
$msp_query = "SELECT * FROM product WHERE cat_tag = 'mostsoldout' AND sales_completed > 0 ORDER BY sales_completed DESC";
$msp_run = mysqli_query($con,$msp_query);
if(mysqli_num_rows($msp_run)>0)
?>
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$check = 0;
while ($msp_row = mysqli_fetch_array($msp_run))
$pro_id = $msp_row['id'];
$pro_image = $msp_row['image1'];
$pro_desc = $msp_row['description'];
$pro_price = $msp_row['cost'];
$pro_rating = $msp_row['rating'];
$pro_title = $msp_row['title'];
$check = $check + 1;
if($check == 1)
echo "<div class='item active'>";
else
echo "<div class='item'>";
?>
<div class="row">
<div class="col-md-4">
<a href="#"><div class="panel">
<img src="images/<?php echo $pro_image;?>" class="img-responsive center-block" >
<p><?php echo $pro_desc;?></p>
<p>Price:<span class="fa fa-rupee"><?php echo $pro_cost;?>/-</span></p>
<p>Rating: <span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span> </p>
<h5 style="color:#E80C4F;"><?php echo $pro_title?></h5>
</div></a>
</div>
<div class="col-md-4">
<a href="#"><div class="panel">
<img src="images/<?php echo $pro_image;?>" class="img-responsive center-block" >
<p><?php echo $pro_desc;?></p>
<p>Price:<span class="fa fa-rupee"><?php echo $pro_cost;?>/-</span></p>
<p>Rating: <span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span> </p>
<h5 style="color:#E80C4F;"><?php echo $pro_title?></h5>
</div></a>
</div>
<div class="col-md-4">
<a href="#"><div class="panel">
<img src="images/<?php echo $pro_image;?>" class="img-responsive center-block" >
<p><?php echo $pro_desc;?></p>
<p>Price:<span class="fa fa-rupee"><?php echo $pro_cost;?>/-</span></p>
<p>Rating: <span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span> </p>
<h5 style="color:#E80C4F;"><?php echo $pro_title?></h5>
</div></a>
</div>
</div>
</div>
<?php
?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
<span style="color:black"; class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
<span style="color:black"; class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php
else
echo "<center>No products yet</center>";
?>
</div><!--most sold product slider-->【问题讨论】：
【参考方案1】：您的循环为每个产品创建一个新的“项目”和三个“col-md-4”。您只需要一个“col-md-4”，并实施检查以每三次启动一个新“项目”。
这不是一件很复杂的事情，但是在循环内部和外部正确定位所有检查以及打开和关闭标记可能会很棘手。退出循环时，永远记得关闭最后一个div。
我们在cmets来回后。这应该可以作为您的 index.php 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>Clickart</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/stylesheet.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="css/animated.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!---->
<!---->
<!--container ends here-->
<div class="container-fluid">
<!--upper row bar starts here-->
<div class="row msp" id="most-sold"><!--most sold product slider-->
<h3/>Most Sold out Products</h3>
<?php
$msp_query = "SELECT * FROM product WHERE cat_tag = 'mostsoldout' AND sales_completed > 0 ORDER BY sales_completed DESC";
$msp_run = mysqli_query($con,$msp_query);
if(mysqli_num_rows($msp_run)>0)
?>
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$check = 0;
$full_page = 0;
while ($msp_row = mysqli_fetch_array($msp_run))
$pro_id = $msp_row['id'];
$pro_image = $msp_row['image1'];
$pro_desc = $msp_row['description'];
$pro_price = $msp_row['cost'];
$pro_rating = $msp_row['rating'];
$pro_title = $msp_row['title'];
$check = $check + 1;
if($full_page == 0)
if($check == 1) ?>
<div class='row item active'>
<?php else ?>
</div><div class='row item'>
<?php
?>
<div class="col-md-4">
<a href="#">
<div class="panel">
<img src="images/<?php echo $pro_image;?>" class="img-responsive center-block" >
<p><?php echo $pro_desc;?></p>
<p>Price:<span class="fa fa-rupee"><?php echo $pro_cost;?>/-</span></p>
<p>Rating: <span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span><span style="color:gold;" class="fa fa-star"></span> </p>
<h5 style="color:#E80C4F;"><?php echo $pro_title?></h5>
</div>
</a>
</div>
<?php
$full_page++;
if($full_page == 2)
$full_page = 0;
?>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
<span style="color:black"; class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
<span style="color:black"; class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php
else
echo "<center>No products yet</center>";
?>
</div><!--most sold product slider-->
</div>
<!--container ends here-->
<!-- Bootstrap core javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/script.js"></script>
<script src="js/bootstrap-dropdownhover.min.js"></script>
</body>
</html>
【讨论】：
Gregkos 非常感谢您的回答。但是，如果我只放置一个列，则只有一个项目显示在一行幻灯片中，而另一个项目出现在另一行滑块上。我的滑块完全包含两个滑块行，每行包含三个项目。对于一排单张幻灯片中的 3 个项目。像这样，如果我总共有 15 个产品，并且通过在每个滑块行中除以其中的 3 个，总共将存在五个滑块行。这就是我的滑块的工作原理。基于此，如果我维护一个包含单个项目的列，总共 15 个产品将进入 15 个滑块行，但不会分为 3（产品）/5（滑块行） 发现的另一件事是相同的 sql 查询应用于我的所有列，因此相同的数据正在重复 请查看我的更新答案，让我知道它是否适合您。 :) 亲爱的gregkos，它起作用了，但是在剩余的 3 件物品出现在滑块下方之后，我想在 3 件物品必须进入另一个滑块后，一次显示 3 件物品。我将截图供您参考–dropbox.com/s/e71fzd4n969oen8/… 您使用的是我可以在网上看到的特定滑块吗？正确的格式因每个滑块的结构而异。如果是你自己的，你能用你完整的相关代码更新问题吗？以上是关于如何使用 php 和 mysql 在单行引导滑块中获取不同的数据结果的主要内容，如果未能解决你的问题，请参考以下文章