目前，我使用导航菜单显示项目类别，使用Ajax对所选类别显示的项目进行排序/限制，并使用lazyload在滚动时显示其他项目。
我想将导航菜单更改为两个按钮下拉菜单 - 一个用于分类，另一个用于位置。我希望用户能够按类别进行排序或单独存储，或者按类别和存储一起存储。
情景：
我希望这也可以按相反的顺序使用，即如果用户先选择位置，然后那么类别。
我的代码是膝盖深处 - 不是我们所有人！ ;） - 并认为我需要另一双眼睛直接拍我！我哪里错了？！？ TIA的帮助。
仅供参考，目前我选择该类别时，它运作正常。当我选择一个位置时，它只显示最后一个类别中位置的项目，而不管之前选择的类别，然后当我滚动时，lazyload开始显示来自所有位置和所有类别的项目。如果我首先选择位置，它会显示最后一个类别的位置项目。非常感谢任何帮助。
以下是按钮：（包含菜单）
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Category <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li'; if (!$_REQUEST || $_REQUEST['show']) { echo ' class="active"'; } echo '><a class="pawn-sort" href="?show=all">Show All</a></li>'."\n";
$result = $site->query("SELECT * FROM CATEGORIES ORDER BY NAME ASC");
while ($data = $result->fetch_array())
{
$category_id = $data['ID'];
$cats = $site->query("SELECT * FROM PRODUCTS WHERE CATEGORIES LIKE '%$category_id%'");
if ($cat = $cats->fetch_array())
{
echo '<li'; if ($category_id == $_REQUEST['category']) { echo ' class="active"'; } echo '>
<a href="?category=' . $category_id . '&kingdom='.$kingdom.'" class="pawn-sort">' . ucwords($data['NAME']) . '</a>
<!-- <a data-index="' . $category_id . '" name="cat" href="#">' . ucwords($data['NAME']) . '</a> -->
</li>'."\n";
}
}
echo '</ul>
</div>
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Store <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="?category=all">Show All</a></li>
<li class="divider"></li>
<li><a href="?category=' . $category_id . '&kingdom=location1" class="pawn-sort">location1</a></li>
<li><a href="?category=' . $category_id . '&kingdom=location2" class="pawn-sort">location2</a></li>
<li><a href="?category=' . $category_id . '&kingdom=location3" class="pawn-sort">location3</a></li>
<li><a href="?category=' . $category_id . '&kingdom=location4" class="pawn-sort">location4</a></li>
<li><a href="?category=' . $category_id . '&kingdom=location5" class="pawn-sort">location5</a></li>
<li><a href="?category=' . $category_id . '&kingdom=location6" class="pawn-sort">location6</a></li>
<li><a href="?category=' . $category_id . '&kingdom=location7" class="pawn-sort">location7</a></li>
</ul>
</div>
这里是ajax获取项目并显示它们的地方：（ajax-get-items）
define('ITEMS_PER_PAGE',8);
$category = $_GET['category'] ? $_GET['category'] : null;
$kingdom = $_GET['kingdom'] ? $_GET['kingdom'] : null;
if ($kingdom)
{
$this_store = " AND STORE = '$kingdom'";
} else {
$this_store = '';
}
$page = $_GET['page'] ? ($_GET['page']) : 1;
if($page < 1)
{
$page = 1;
}
$first = $_GET['first'] ? ($_GET['first']) : 0;
$next = $page + 1;
$start = ($page - 1 ) * ITEMS_PER_PAGE;
$offset = ITEMS_PER_PAGE;
if ($category) {
$que = "SELECT * FROM PRODUCTS WHERE QUANTITY != '0' AND STATUS = '1' AND CATEGORIES LIKE '%$category%' $this_store ORDER BY DATE DESC LIMIT $start, $offset";
$queAll = "SELECT * FROM PRODUCTS WHERE QUANTITY != '0' AND STATUS = '1' AND CATEGORIES LIKE '%$category%' $this_store ORDER BY DATE DESC";
} else {
$que = "SELECT * FROM PRODUCTS WHERE QUANTITY != '0' AND STATUS = '1' $this_store ORDER BY DATE DESC LIMIT $start, $offset";
$queAll = "SELECT * FROM PRODUCTS WHERE QUANTITY != '0' AND STATUS = '1' $this_store ORDER BY DATE DESC";
}
// COUNT HOW MANY ITEMS AVAILABLE
$resultsAll = $site->query("$queAll");
$countAll = count($resultsAll->fetch_assoc());
// MAIN QUERY
$results = $site->query("$que");
$output = "";
$counter = 0;
while ($cupon = $results->fetch_array()) {
$name = $cupon['NAME'];
$price = $cupon['PRICE'];
$store = $cupon['STORE'];
$sku = $cupon['SKU'];
$upc = $cupon['UPC'];
$img_id = $cupon['IMAGE_ID'];
$notify = $cupon['NOTIFY'];
$store_sku = $cupon['STORE_SKU'];
$out = "&out=true";
$img = "img/l/{$img_id}_1.jpg";
$output .= '<div class="pin">
<div id="pin_' . $counter . '">
<div class="thumbnail" style="overflow: hidden;">
<ul class="img-list">
<li>
<a href="/buy.php?sku=' . $sku . '">
<img class="radius" src="/' . $img . '">
<span class="text-content"><span>View Product Info</span></span></a>
</li>
</ul>
<div class="caption pinkish" style="margin-top:-9px;">
<h4 class="pin-title">' . $name . '</h4>
<hr style="margin-bottom:5px;">' . "\n";
$kingdoms = $castle->query("SELECT NAME, CITY, STATE FROM KINGDOMS WHERE ID = '$store' LIMIT 1");
$kingdom = $kingdoms->fetch_array();
$output .= '<a href="/buy.php?sku=' . $sku . '" class="pin-location pull-right" style="padding-top:3px;">#' . $store_sku . '</a>
<a href="http://privatepawns.com/kingdom/' . $store . '/" target="_blank" class="pin-location"><span class="glyphicon glyphicon-map-marker"></span> ' . $kingdom['CITY'] . '</a>
<hr style="margin-top:5px;margin-bottom:3px;">
<p class="pin-price">
<a href="/buy.php?sku=' . $sku . '" class="btn btn-info btn-sm pull-right btn-green" style="margin-top:3px;" role="button">
<span class="glyphicon glyphicon-search small"></span> More info
</a>
<span class="price">$' . number_format($price, 2) . '</span>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>' . "\n";
$counter++;
}
$output.= '<script type="text/javascript">
var container = document.querySelector(\'#container\');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
// options
itemSelector: \'.pin\'
});
});
</script>';
if($category)
{
if(((($page -1) * ITEMS_PER_PAGE + $counter)< $countAll) )
{
$output.= '<div id="page-nav"><a href="ajax-pagination/'.$next.'/'.$category.'"></a></div>';
} else {
$output.= "<script>$('#container').infinitescroll('unbind', {debug: true});</script>";
}
} else {
if(((($page -1) * ITEMS_PER_PAGE + $counter)< $countAll) )
{
$output.= '<div id="page-nav"><a href="ajax-pagination/'.$next.'"></a></div>';
} else {
$output.= "<script>$('#container').infinitescroll('unbind', {debug: true});</script>";
}
}
echo $output;
这是jquery：
<script>
$('.filter').on('click',function(){
var filterValue = $(this).attr('data-filter');
$('#alist').isotope({filter: filterValue});
})
var $container = $('#container');
function customMasonry(newElements)
{
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( $container, function() {
msnry = new Masonry( container, {
// options
itemSelector: '.pin'
});
});
});
}
function customScroll()
{
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
debug: false,
animate : false,
errorCallback : function() {
$container.infinitescroll('destroy');
$.removeData(this);
},
nextSelector : '#page-nav:first a:first', // selector for the NEXT link (to page 2)
itemSelector : '.pin', // selector for all items you'll retrieve
loading: {
finishedMsg: '',
img: 'loading.gif',
msgText: ''
}
},
// trigger Masonry as a callback
function( newElements ) {
customMasonry(newElements)
}
);
}
$(function(){
var isMobile = window.matchMedia("only screen and (min-width: 760px)");
if (isMobile.matches) {
$("#categories").sticky({topSpacing: 70});
}
customScroll();
$('.pawn-sort').click(function(event){
$('#container').html('');
$('#container').infinitescroll('bind');
$('html, body').animate({
scrollTop: $("#container").offset().top -369
}, 0);
$url = $(this).attr('href');
var res = $url.split("&");
var cat = res[0].split("=");
var $category = cat[1];
var king = res[1].split("=");
var $kingdom = king[1];
if($category == 'all' )
{
$category = null;
}
if($kingdom == 'all' )
{
$kingdom = null;
}
$('#container').css({height:500});
$.ajax({
method: "GET",
url: "ajax-get-items.php",
data: { page: "1", category: $category, kingdom: $kingdom, first: true }
})
.done(function( msg ) {
$('#container').html("<div id='gif'><img src='loading.gif'/></div>");
setTimeout(
function()
{
$('#container').html(msg);
// Reset the plugin before intializing it again
$('#container').infinitescroll('destroy');
$('#container').data('infinitescroll', null);
// Initialize plugin
$('#container').infinitescroll(
{
state: {
isDestroyed: false,
isDone: false,
isDuringAjax : false
}
}
);
customScroll();
}, 500);
});
event.preventDefault();
})
});
</script>