Jquery多类别复选框筛选

我正在使用MySql和同位素从我的数据库中获取类别，并在我的网站上对它们进行排序

我当前的javascript代码如下所示：

    <script type="text/javascript">
$( function() {
  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.item'
  });

  // store filter for each group
  var filters = {};

  $('#filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = '';
    for ( var prop in filters ) {
    filterValue += filters[ prop ];  //here theres something wrong
    }
    // set filter for Isotope
    $container.isotope({ filter: filterValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

});

</script>

这是我的HTML

 <div class="sixteen columns list" style="margin-top:100px; min-height: 350px;">
                            <div id="filters">
                            <div class="ui-group">
                            <div class="button-group" data-filter-group="cat1">
                            <button class="button is-checked" data-filter="">any</button>
                            <?php //first check first category, then second, then third? count amount?
                            $conn = mysqli_connect("localhost","root","","products");
                            // Check connection
                            if ($conn->connect_error) {
                                    die("Connection failed: " . $conn->connect_error);
                            }
                            $count_cat1=array_count_values($product_category1);//Counts the values in the array, returns associatve array
                            arsort($count_cat1);//Sort it from highest to lowest
                            $keys_cat1=array_keys($count_cat1);//Split the array so we can find the most occuring key

                            $count_cat2=array_count_values($product_category2);//Counts the values in the array, returns associatve array
                            arsort($count_cat2);//Sort it from highest to lowest
                            $keys_cat2=array_keys($count_cat2);//Split the array so we can find the most occuring key

                            $count_cat3=array_count_values($product_category3);//Counts the values in the array, returns associatve array
                            arsort($count_cat3);//Sort it from highest to lowest
                            $keys_cat3=array_keys($count_cat3);//Split the array so we can find the most occuring key

                            $cat_amount1 = count($count_cat1);
                            $cat_amount2 = count($count_cat2);
                            $cat_amount3 = count($count_cat3);
                            //echo $catamount;
                            //cat1 cat2 and cat3 filtering
                            $i=0;
                            for($i;$i<$cat_amount1;$i++){
                            $keys_cat1[$i] = preg_replace('/\s*/', '', $keys_cat1[$i]);
                            ?>
                              <button class="button" data-filter="<?php echo $keys_cat1[$i];?>"><?php echo $keys_cat1[$i];?></button>
                            <?php
                            }
                            echo "</div></div><br/><div class=\"ui-group\"><div class=\"button-group\" data-filter-group=\"cat2\"><button class=\"button is-checked\" data-filter=\"\">any</button>";
                            $i=0;
                            for($i;$i<$cat_amount2;$i++){
                            $keys_cat2[$i] = preg_replace('/\s*/', '', $keys_cat2[$i]);
                            ?>
                              <button class="button" data-filter="<?php echo $keys_cat2[$i];?>"><?php echo $keys_cat2[$i];?></button>
                            <?php
                            }
                            echo "</div></div><br/><div class=\"ui-group\"><div class=\"button-group\" data-filter-group=\"cat3\"><button class=\"button is-checked\" data-filter=\"\">any</button>";
                            $i=0;
                            for($i;$i<$cat_amount3;$i++){
                            $keys_cat3[$i] = preg_replace('/\s*/', '', $keys_cat3[$i]);
                            ?>
                              <button class="button" data-filter="<?php echo $keys_cat3[$i];?>"><?php echo $keys_cat3[$i];?></button>
                            <?php
                            }
                            ?>  
                            </div></div>
                            </div>
                            <p><button id="shuffle">Shuffle</button></p>
                    <div class="isotope"><!--doesn't exist-->
                            <?php
                            $i=0;
                            for($i;$i<$search_amount;$i++){
                                    // strip out all whitespace
                                    $product_category1[$i] = preg_replace('/\s*/', '', $product_category1[$i]);
                                    $product_category2[$i] = preg_replace('/\s*/', '', $product_category2[$i]);
                                    $product_category3[$i] = preg_replace('/\s*/', '', $product_category3[$i]);
                                    // convert the string to all lowercase
                                    $product_category1[$i] = strtolower($product_category1[$i]);
                                    $product_category2[$i] = strtolower($product_category2[$i]);
                                    $product_category3[$i] = strtolower($product_category3[$i]);
                                    //convert title to link
                                    $product_link = preg_replace('/[\s_]/', '-', $product_name[$i]);
                            ?>
                            <div class="item <?php echo $product_category1[$i]?> <?php echo $product_category2[$i]?> <?php echo $product_category3[$i]?>" title="<?php echo $product_name[$i]?>">
                                    <img src="http://localhost/easesign/images/<?php echo $product_image1[$i]?>.jpg"width="150px" height="150px"alt="<?php echo $product_name[$i]?>"/>
                                    <h6><?php echo $product_name[$i]?></h6>
                                    <span class="price">$<?php echo $product_price[$i]?></span>
                                    <i class="retail_price">Retail Value <del>$<?php echo $product_price[$i]+30;?></del></i>
                                    <br class="clear">
                            </div>
                            <?php
                            }
                            //from list id get category names (max of ?), order by newest, most popular
                            ?>

---

同位素代码就是基于这个。谢谢。

请您也给出HTML结构好吗。我看到您为过滤器创建了一个逗号分隔的字符串，但复选框中的值是否包含。在他们里面？因为同位素中的过滤器参数需要选择器。我已经修改了javascript，因为演示似乎就是我想要的，但是它仍然不起作用。我认为这是jquery的问题。