我正在使用MySql和Isotope从我的数据库中获取类别并在我的网站上对它们进行排序。
我目前的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
?>
同位素代码基于此http://codepen.io/desandro/pen/JEojz/。感谢。