Php 产品的多个复选框选择(筛选)
我试图做的是为产品做一个过滤器,我从数据库中检索产品,包括一个图像和一些信息,我想要一些过滤器,比如:产品和品牌 我有这个代码,但当我选择两个过滤器时,如品牌1+产品2,它会显示品牌1的所有产品和所有产品编号2。。我想把它结合起来 这是我的密码: HTML+PHPPhp 产品的多个复选框选择(筛选),php,jquery,filter,Php,Jquery,Filter,我试图做的是为产品做一个过滤器,我从数据库中检索产品,包括一个图像和一些信息,我想要一些过滤器,比如:产品和品牌 我有这个代码,但当我选择两个过滤器时,如品牌1+产品2,它会显示品牌1的所有产品和所有产品编号2。。我想把它结合起来 这是我的密码: HTML+PHP <div id="row" class="row"> <?php if(!empty($_GET["category"])){ include('open_conexion.php'); $sql = "
<div id="row" class="row">
<?php
if(!empty($_GET["category"])){
include('open_conexion.php');
$sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
?>
<div class="col-lg-4" data-category="<?php echo $row['product'];?>" brand="<?php echo $row['brand'];?>" >
<img class="img-circle" src='images/<?php echo $row['imag']; ?>' width="180px;" height="180px;"alt="">
<h4><?php echo $row['product']." ". $row['brand']; ?></h4>
<p><?php echo $row['description'];?> </p>
<p><a class="btn btn-default" href='detalles.php?id=<?php echo $row['id_product']?>'>View Details »</a></p>
</div><!-- /.col-lg-4 -->
<?php } } ?>
</div><!-- /.row -->
代码中最有问题的行(关于过滤)可能是以下两行:
$('.row >div[data-category=' + this.value + ']').show();
$('.row >div[brand=' + this.value + ']' ).show();
这里您明确地说“显示数据类别=值的所有分区和显示品牌=值的所有分区”
实际上,您需要的是“显示数据类别=值和品牌=值的所有div”
你可能想试试类似的东西
$('input[type="checkbox"]:checked').each(function() {
$('.row >div[data-category=' + this.value + '][brand=' + this.value + ']').show();
});
此外,代码中还有一些额外的问题(与过滤问题无关):
1)在
$sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'";
2)您可以将单击事件绑定到DOM中的每个复选框,甚至绑定到不用于筛选的复选框,使用更改事件而不是单击事件也更合适(您还可以通过键盘更改复选框状态,而不仅仅是通过鼠标单击)
如果我正确理解您的问题,您需要做的是增强$sql语句,以便只提取报表所需的数据:
$sql='SELECT * FROM products'; // Pull everything by default
if (isset($_GET['category']) || isset($_GET['product'])) { //Only need the following if something was checked
$sql.=' WHERE ';
if (isset($_GET['category'])) {
$sql.='category="' . $_GET['category'] . '"'; //Narrows down the results
if (isset($_GET['product'])) {
$sql.=' AND '; //Only necessary if both are checked
}
}
if (isset($_GET['product'])) {
$sql.='product="' . $_GET['product'] . '"'; //Narrows down the results...more if both were checked
}
}
如果您只是在检查某些内容时才运行此程序,那么第一个条件是不必要的,尽管我很确定情况并非如此。这里让我们简单一点
与其全部隐藏,然后只显示部分,不如全部显示,然后隐藏不匹配的部分
// Show all at the beginning
$('.row >div').show();
// For each item...
$('.row > div ).each(function(){
var $item = $(this);
// Check against each checkbox...
$('input[type="checkbox"]:checked').each(function() {
var $checkbox = $(this), pass = false;
if($item.attr('data-category') == $checkbox.value) pass = true;
if($item.attr('brand') == $checkbox.value) pass = true;
// and if the brand or category doesn't match the checkbox value, hide it
if(!pass) $item.hide();
});
});
我假设您正在尝试使用jquery或javascript过滤产品客户端,而不是使用带有查询的服务器端
保持您的复选框和产品列表如下所示:
<div><input name="product1" id="product1" data-id="1" class="products" type="checkbox" />Product 1</div>
<div><input name="product2" id="product2" data-id="2" class="products" type="checkbox" />Product 2</div>
<div><input name="product3" id="product3" data-id="3" class="products" type="checkbox" />Product 3</div>
<div><input name="brand1" id="brand1" data-id="1" class="brands" type="checkbox" />Brand 1</div>
<div><input name="brand2" id="brand2" data-id="2" class="brands" type="checkbox" />Brand 2</div>
<div><input name="brand3" id="brand3" data-id="3" class="brands" type="checkbox" />Brand 3</div>
<div class="row">
<div class="product" brand="1" data-category="1">product 1 brand 1</div>
<div class="product" brand="1" data-category="1">product 1 brand 1</div>
<div class="product" brand="2" data-category="1">product 1 brand 2</div>
<div class="product" brand="2" data-category="1">product 1 brand 2</div>
<div class="product" brand="3" data-category="1">product 1 brand 3</div>
<div class="product" brand="3" data-category="1">product 1 brand 3</div>
<div class="product" brand="1" data-category="2">product 2 brand 1</div>
<div class="product" brand="1" data-category="2">product 2 brand 1</div>
<div class="product" brand="2" data-category="2">product 2 brand 2</div>
<div class="product" brand="2" data-category="2">product 2 brand 2</div>
<div class="product" brand="3" data-category="2">product 2 brand 3</div>
<div class="product" brand="3" data-category="2">product 2 brand 3</div>
<div class="product" brand="1" data-category="3">product 3 brand 1</div>
<div class="product" brand="1" data-category="3">product 3 brand 1</div>
<div class="product" brand="2" data-category="3">product 3 brand 2</div>
<div class="product" brand="2" data-category="3">product 3 brand 2</div>
<div class="product" brand="3" data-category="3">product 3 brand 3</div>
<div class="product" brand="3" data-category="3">product 3 brand 3</div>
</div>
产品1
产品2
产品3
品牌1
品牌2
品牌3
产品1品牌1
产品1品牌1
产品1品牌2
产品1品牌2
产品1品牌3
产品1品牌3
产品2品牌1
产品2品牌1
产品2品牌2
产品2品牌2
产品2品牌3
产品2品牌3
产品3品牌1
产品3品牌1
产品3品牌2
产品3品牌2
产品3品牌3
产品3品牌3
Javascript代码应该是这样的,我使用jQuery进行过滤。希望您也尝试使用jQuery
<script type="text/javascript">
$(function(){
$('.products, .brands').on('click', function(){
var checkedProducts = $('.products:checked');
var checkedBrands = $('.brands:checked');
if(checkedProducts.length || checkedBrands.length){
if(checkedBrands.length === 0){
$('.row > div').hide();
$.each(checkedProducts, function(){
var prdId = $(this).attr('data-id');
$('.row > div[data-category="' + prdId + '"]').show();
});
} else if(checkedProducts.length === 0) {
$('.row > div').hide();
$.each(checkedBrands, function(){
var brandId = $(this).attr('data-id');
$('.row > div[brand="' + brandId + '"]').show();
});
} else {
$('.row > div').hide();
$.each(checkedProducts, function(){
var prdId = $(this).attr('data-id');
$.each(checkedBrands, function(){
var brandId = $(this).attr('data-id');
$('.row > div[data-category="' + prdId + '"][brand="' + brandId + '"]').show();
});
});
}
} else {
$('.row > div').show();
}
});
});
</script>
$(函数(){
$('.products,.brands')。在('click',function()上{
var checkedProducts=$('.products:checked');
var checkedBrands=$('.brands:checked');
if(checkedProducts.length | | checkedBrands.length){
如果(checkedBrands.length==0){
$('.row>div').hide();
$.each(选中产品,函数(){
var prdId=$(this.attr('data-id');
$('.row>div[data category=“'+prdId+'“]”)显示();
});
}else if(checkedProducts.length==0){
$('.row>div').hide();
$。每个(选中品牌,功能(){
var brandId=$(this.attr('data-id');
$('.row>div[brand=“'+brandId+''“]).show();
});
}否则{
$('.row>div').hide();
$.each(选中产品,函数(){
var prdId=$(this.attr('data-id');
$。每个(选中品牌,功能(){
var brandId=$(this.attr('data-id');
$('.row>div[data category=“”+prdId+“]”][brand=“”+brandId+“]”)显示();
});
});
}
}否则{
$('.row>div').show();
}
});
});
就这样!你得救了。。如果你有任何问题,请告诉我。只是一个提示,你应该清理一下$\u GET[“category”]可能会有6个人稍后过来说“嘿,我对你的问题投了赞成票,想找时间和我出去吗?”@j08691–我也同样感到困惑。让我说一句话,我添加了PHP部分,因为我没有找到任何将数据检索到这些div中的示例,而不仅仅是编写一些html行。。。我希望我没有必要发表这个问题,所以要有建设性,或者只是为你保留你的意见。我是有建设性的。我解释过,应该发布呈现的HTML,而不是PHP,因为数据如何放入div无关紧要。您使用jQuery进行排序,因此这里最重要的是您的HTML和JavaScript。正如我前面所说的,一个JSFIDLE.net示例帮助我们帮助您。您是否尝试用我提供的方法替换代码中的这两个.show()方法?如果没有实际的html输出,很难判断问题出在哪里。是的,我试过了,但没有成功。。。我不能把这段代码放在小提琴里,因为我正在从数据库中检索数据,这就是我放在代码里的div class=行中显示的内容,每个产品都显示在div col-lg-4中
<div><input name="product1" id="product1" data-id="1" class="products" type="checkbox" />Product 1</div>
<div><input name="product2" id="product2" data-id="2" class="products" type="checkbox" />Product 2</div>
<div><input name="product3" id="product3" data-id="3" class="products" type="checkbox" />Product 3</div>
<div><input name="brand1" id="brand1" data-id="1" class="brands" type="checkbox" />Brand 1</div>
<div><input name="brand2" id="brand2" data-id="2" class="brands" type="checkbox" />Brand 2</div>
<div><input name="brand3" id="brand3" data-id="3" class="brands" type="checkbox" />Brand 3</div>
<div class="row">
<div class="product" brand="1" data-category="1">product 1 brand 1</div>
<div class="product" brand="1" data-category="1">product 1 brand 1</div>
<div class="product" brand="2" data-category="1">product 1 brand 2</div>
<div class="product" brand="2" data-category="1">product 1 brand 2</div>
<div class="product" brand="3" data-category="1">product 1 brand 3</div>
<div class="product" brand="3" data-category="1">product 1 brand 3</div>
<div class="product" brand="1" data-category="2">product 2 brand 1</div>
<div class="product" brand="1" data-category="2">product 2 brand 1</div>
<div class="product" brand="2" data-category="2">product 2 brand 2</div>
<div class="product" brand="2" data-category="2">product 2 brand 2</div>
<div class="product" brand="3" data-category="2">product 2 brand 3</div>
<div class="product" brand="3" data-category="2">product 2 brand 3</div>
<div class="product" brand="1" data-category="3">product 3 brand 1</div>
<div class="product" brand="1" data-category="3">product 3 brand 1</div>
<div class="product" brand="2" data-category="3">product 3 brand 2</div>
<div class="product" brand="2" data-category="3">product 3 brand 2</div>
<div class="product" brand="3" data-category="3">product 3 brand 3</div>
<div class="product" brand="3" data-category="3">product 3 brand 3</div>
</div>
<script type="text/javascript">
$(function(){
$('.products, .brands').on('click', function(){
var checkedProducts = $('.products:checked');
var checkedBrands = $('.brands:checked');
if(checkedProducts.length || checkedBrands.length){
if(checkedBrands.length === 0){
$('.row > div').hide();
$.each(checkedProducts, function(){
var prdId = $(this).attr('data-id');
$('.row > div[data-category="' + prdId + '"]').show();
});
} else if(checkedProducts.length === 0) {
$('.row > div').hide();
$.each(checkedBrands, function(){
var brandId = $(this).attr('data-id');
$('.row > div[brand="' + brandId + '"]').show();
});
} else {
$('.row > div').hide();
$.each(checkedProducts, function(){
var prdId = $(this).attr('data-id');
$.each(checkedBrands, function(){
var brandId = $(this).attr('data-id');
$('.row > div[data-category="' + prdId + '"][brand="' + brandId + '"]').show();
});
});
}
} else {
$('.row > div').show();
}
});
});
</script>