php - 产品的多个复选框选择（过滤器）

Question

我想做的是为产品做一个过滤器，我从数据库中检索产品，包括图像和一些信息，我想要一些过滤器，比如：产品和品牌

我有这个代码，但是当我选择两个过滤器（如品牌 1 + 产品 2）时，它会显示品牌 1 的所有产品和所有产品编号 2 .. 我希望它结合起来......

这是我的代码：

HTML+PHP

<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 &raquo;</a></p>

</div><!-- /.col-lg-4 -->



  <?php } } ?>


  </div><!-- /.row -->

和 jQuery：

 <script>
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
    $('.row >div').hide();


    $('input[type="checkbox"]:checked').each(function() {
        $('.row >div[data-category=' + this.value + ']').show();
        $('.row >div[brand=' + this.value + ']' ).show();

    });
} else {
    $('.row >div').show();


}
});

谢谢

Answer 1

我假设您正在尝试使用 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>

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>

而已！你得救了。如果你有任何问题，请告诉我。

Answer 2

如果我正确理解您的问题，您需要做的是增强您的 $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
    }
}

如果您仅在检查某些内容时才运行它，则第一个条件不是必需的，尽管我很确定情况并非如此。

Answer 3

让我们在这里简单一点。

与其隐藏所有，然后只显示一些，而是显示所有，然后隐藏不匹配的那些。

// 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();

    });
});

Answer 4

您的代码中最有问题的行（关于过滤）可能是这两行：

$('.row >div[data-category=' + this.value + ']').show();
$('.row >div[brand=' + this.value + ']' ).show();

在这里，您明确地说“显示data-category=value 的 所有div并显示brand=value的所有div ”。

您真正想要的是“显示data-category=value和brand=value的所有div ”。

您可能想尝试类似的东西

$('input[type="checkbox"]:checked').each(function() {
    $('.row >div[data-category=' + this.value + '][brand=' + this.value + ']').show();    
});

此外，您的代码中还有一些额外的问题（与您的过滤问题无关）：

1)真正直接的 sql 注入可能性

$sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'";

2）您将单击事件绑定到DOM 中的每个复选框，甚至绑定到不用于过滤的复选框，使用更改事件而不是单击事件会更合适（您还可以通过键盘更改复选框状态，不仅通过鼠标点击）

$('input[type="checkbox"]').click(function() {