这里我把我的java脚本文件和html结构的代码。 产品快速查看模式工作，直到我不使用过滤器，但当我选择一些过滤它停止工作。
//product fiter start
$(document).ready(function() {
function showValues() {
$("#productContainer").css("opacity",0.5);
$("#loaderID").css("opacity",1);
//e.css('visibility','visible');
var mainarray = new Array();
var brandarray = new Array();
$('input[name="bcheck"]:checked').each(function(){
brandarray.push($(this).val());
$('.spanbrandcls').css('visibility','visible');
//alert($(this).attr("checkboxname"));
});
if(brandarray=='') $('.spanbrandcls').css('visibility','hidden');
var brand_checklist = "&bcheck="+brandarray;
var sizearray = new Array();
$('input[name="scheck"]:checked').each(function(){
sizearray.push($(this).val());
$('.spansizecls').css('visibility','visible');
});
if(sizearray=='') $('.spansizecls').css('visibility','hidden');
var size_checklist = "&scheck="+sizearray;
var colorarray = new Array();
$('input[name="ccheck"]:checked').each(function(){
colorarray.push($(this).val());
$('.spancolorcls').css('visibility','visible');
});
if(colorarray=='') $('.spancolorcls').css('visibility','hidden');
var color_checklist = "&ccheck="+colorarray;
var pricearray = new Array();
$('input[name="price_range"]:checked').each(function(){
pricearray.push($(this).val());
$('.spanpricecls').css('visibility','visible');
});
if(pricearray=='') $('.spanpricecls').css('visibility','hidden');
var price_checklist = "&price_range="+pricearray;
var main_string = brand_checklist+size_checklist+color_checklist+price_checklist;
main_string = main_string.substring(1, main_string.length)
//alert(main_string);
$.ajax({
type: "POST",
url: "filter_products1.php",
data: main_string,
cache: false,
success: function(html){
//alert(html);
$("#productContainer").html(html);
$("#productContainer").css("opacity",1);
$("#loaderID").css("opacity",0);
}
});
}
$("input[type='checkbox'], input[type='radio']").on( "click", showValues );
$("select").on( "change", showValues );
$(".spanbrandcls").click(function(){
$('.bcheck').removeAttr('checked');
showValues();
$('.spanbrandcls').css('visibility','hidden');
});
$(".spansizecls").click(function(){
$('.scheck').removeAttr('checked');
showValues();
$('.spansizecls').css('visibility','hidden');
});
$(".spancolorcls").click(function(){
$('.ccheck').removeAttr('checked'); showValues();
$('.spancolorcls').css('visibility','hidden');
});
$(".spanpricecls").click(function(){
$('.price_range').removeAttr('checked'); showValues();
$('.spanpricecls').css('visibility','hidden');
});
$(".clear_filters").click(function(){
$('#productCategoryLeftPanel').find('input[type=checkbox]:checked').removeAttr('checked');
$('#productCategoryLeftPanel').find('input[type=radio]:checked').removeAttr('checked');
showValues();
});
});
//product fiter ends here
//Quick view
//----Include-Function----
function include(url){
"use strict";
document.write('<script src="'+ url + '" type="text/javascript"></script>');
}
include('twitter/jquery.tweet.js'); // Twitter widget */
include('js/tinynav.min.js'); // Tiny nav
$(document).ready(function(){
"use strict";
var windowWidth = $(window).width();
var windowHeight = $(window).height();
/* Quick View */
quickViewModal($('a.product-hover'));
/* Functions */
dropdownsNavigation(); // DropDowns
searchBar(); // Search Bar
selectBox(); // Select Boxes (Chosen plugin)
backToTop(); // Back to top arrow
backToTopEvent(); // Initialize back to top event
tabsOn(); // Turn Tabs On
accordionsOn(); // Turn Accordions On
fixNavigation(); // Fix Main Navigation
fixGridView(); // Fix Category Grid View
installCarousels(); // Install Owl Carousels
installNoUiSlider(); // Installs noUi Slider
singleProduct(); // Cloud Zoom
/* Window Scroll */
$(window).scroll(function(){
backToTop(); // Back to top
});
/* Window Resize */
$(window).resize(function(){
// Set the new Window Width and Height
windowWidth = $(window).width();
windowHeight = $(window).height();
fixNavigation(); // Fix Main Navigation
fixGridView(); // Fix Category Grid View
fixRevolutionArrows(); // Fix Revolution Sliders Arrows
});
/* Twitter WIdget */
$('#twitter-widget').tweet({
modpath: 'twitter/',
count: 2,
loading_text: 'loading twitter feed...',
})
/* Tooltips */
$('.tooltip-hover').tooltip();
// TinyNav.js 1
$('#main-navigation>ul').tinyNav({
active: 'current-item',
header: 'Navigation',
indent: '→',
label: 'Menu'
});
/* Revolutions Slider */
jQuery('.tp-banner').revolution({
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
navigationType:"none"
});
/* IOS Slider */
$('.iosSlider').iosSlider({
scrollbar: true,
snapToChildren: true,
desktopClickDrag: true,
scrollbarMargin: '5px 40px 0 40px',
scrollbarBorderRadius: 0,
scrollbarHeight: '2px',
navPrevSelector: $('.prevButton'),
navNextSelector: $('.nextButton')
});
/* FlexSlider */
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
prevText: "",
nextText: "",
start: function(slider){
$('body').removeClass('loading');
}
});
/* Sidebar Flexslider */
$('.sidebar-flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: false,
prevText: "",
nextText: "",
start: function(slider){
$('body').removeClass('loading');
}
});
/* Rating */
// Read Only
$('.rating.readonly-rating').raty({
readOnly: true,
path:'js/img',
score: function() {
return $(this).attr('data-score');
}
});
// Rate
$('.rating.rate').raty({
path:'js/img',
score: function() {
return $(this).attr('data-score');
}
});
/* Fix Revolution Slider Arrows */
function fixRevolutionArrows() {
$('.tp-banner').each(function(){
setTimeout(function(){
var arrow_l = $('.tp-banner').find('.tp-leftarrow');
var arrow_r = $('.tp-banner').find('.tp-rightarrow');
var tp_height = $('.tp-banner').height();
var arrow_height = $(arrow_l).height();
var arrow_top = (tp_height/2)-(arrow_height/2);
$(arrow_l).css('top', arrow_top);
$(arrow_r).css('top', arrow_top);
},1000);
});
}
/* Navigation Height Fix */
function fixNavigation(){
var nav = $('#main-navigation>ul>li');
$(nav).find('>a').attr('style', '');
var nav_height = $(nav).height();
$(nav).each(function(){
$(this).find('>a').innerHeight(nav_height);
});
}
/* Product Grid View */
function fixGridView(){
if($('.grid-view').length>0){
$('.grid-view.product .product-content').attr('style', '');
var product_height = $('.grid-view.product img').height();
var previous_height = $('.grid-view.product .product-content').innerHeight();
if(previous_height < product_height){
$('.grid-view.product .product-content').innerHeight(product_height);
}
}
}
/* Single Product Page */
function singleProduct(){
/* Product Images Carousel */
$('#product-carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
directionNav: false,
slideshow: false,
itemWidth: 80,
itemMargin: 0,
start: function(slider){
setActive($('#product-carousel li:first-child img'));
slider.find('.right-arrow').click(function(){
slider.flexAnimate(slider.getTarget("next"));
});
slider.find('.left-arrow').click(function(){
slider.flexAnimate(slider.getTarget("prev"));
});
slider.find('img').click(function(){
var large = $(this).attr('data-large');
setActive($(this));
$('#product-slider img').fadeOut(300, changeImg(large, $('#product-slider img')));
$('#product-slider a.fullscreen-button').attr('href', large);
});
function changeImg(large, element){
var element = element;
var large = large;
setTimeout(function(){ startF()},300);
function startF(){
element.attr('src', large)
element.attr('data-large', large)
element.fadeIn(300);
}
}
function setActive(el){
var element = el;
$('#product-carousel img').removeClass('active-item');
element.addClass('active-item');
}
}
});
/* FullScreen Button */
$('a.fullscreen-button').click(function(e){
e.preventDefault();
var target = $(this).attr('href');
$('#product-carousel a.fancybox[href="'+target+'"]').trigger('click');
});
/* Cloud Zoom */
$(".cloud-zoom").imagezoomsl({
zoomrange: [3, 3]
});
/* FancyBox */
$(".fancybox").fancybox();
}
/* Set Carousels */
function installCarousels(){
$('.owl-carousel').each(function(){
/* Max items counting */
var max_items = $(this).attr('data-max-items');
var tablet_items = max_items;
if(max_items > 1){
tablet_items = max_items - 1;
}
var mobile_items = 1;
/* Install Owl Carousel */
$(this).owlCarousel({
items:max_items,
pagination : false,
itemsDesktop : [1199,max_items],
itemsDesktopSmall : [1000,max_items],
itemsTablet: [920,tablet_items],
itemsMobile: [560,mobile_items],
});
var owl = $(this).data('owlCarousel');
/* Arrow next */
$(this).parent().parent().find('.icon-left-dir').click(function(e){
owl.prev();
});
/* Arrow previous */
$(this).parent().parent().find('.icon-right-dir').click(function(e){
owl.next();
});
});
}
/* No UI Slider */
function installNoUiSlider(){
if($('.noUiSlider').length > 0){
var min_val = $('.noUiSlider').attr('data-min-value');
var max_val = $('.noUiSlider').attr('data-max-value');
var min_range = $('.noUiSlider').attr('data-min-range');
var max_range = $('.noUiSlider').attr('data-max-range');
$('.noUiSlider').noUiSlider({
range: [min_range,max_range]
,start: [min_val,max_val]
,connect: true
,slide: function(){
var noui_val = $('.noUiSlider').val();
$('.price-range-min').text('$'+noui_val[0]);
$('.price-range-max').text('$'+noui_val[1]);
}
});
var noui_val = $('.noUiSlider').val();
$('.price-range-min').text('$'+noui_val[0]);
$('.price-range-max').text('$'+noui_val[1]);
}
}
/* Product Actions Accordion */
var productButtons = $('.product-actions').not('.full-width');
productButtons.find('>span:first-child').addClass('current');
productButtons.find('>span').hover(function(){
$(this).parent().find('>span').removeClass('current');
$(this).addClass('current');
}, function(){
$(this).removeClass('current');
});
productButtons.hover(function(){
}, function(){
$(this).find('>span:first-child').addClass('current');
});
/* NAVIGATION DROPDOWN EFFECTS */
function dropdownsNavigation(){
var mainNav = $('#main-navigation');
var mainNavItems = $('#main-navigation>ul>li');
var sideNavItems = $('.sidebar-box-content>ul>li');
mainNav.find('ul.normalAnimation').removeClass('normalAnimation');
/* Navigation FadeIn Dropdown Effect */
mainNavItems.hover(function(){
var dropdown = $(this).find('>ul');
if(!dropdown.hasClass('animating') && windowWidth>767){
dropdown.css('opacity',0).css('top','150%').show().animate({opacity:1, top:100+'%'},300);
}
}, function(){
var dropdown = $(this).find('>ul');
if(!dropdown.hasClass('animating')){
dropdown.addClass('animating').animate({opacity:0, top:150+'%'},300, function(){
$(this).hide().removeClass('animating');;
});
}
});
/* Navigation SlideDown Dropdown Effect */
sideNavItems.hover(function(){
var dropdown = $(this).find('>ul');
if(!dropdown.hasClass('animating') && windowWidth>767){
dropdown.hide().fadeIn(200);
}
}, function(){
var dropdown = $(this).find('>ul');
if(!dropdown.hasClass('animating')){
$(this).find('>ul').addClass('animating').show().fadeOut(100, function(){
$(this).removeClass('animating');
});
}
});
/* Navigation Fadein Dropdown Effect 2 */
mainNav.find('ul.normal-dropdown>li').hover(function(){
var dropdown = $(this).find('>ul');
if(!dropdown.hasClass('animating') && windowWidth>767){
dropdown.hide().fadeIn(200);
}
}, function(){
var dropdown = $(this).find('>ul');
if(!dropdown.hasClass('animating')){
$(this).find('>ul').addClass('animating').show().fadeOut(100, function(){
$(this).removeClass('animating');
});
}
});
}
/* Search BAR */
function searchBar(){
/* SearchBar Fadein Effect */
var searchButton, searchBar;
searchButton = $('.nav-search');
searchBar = $('#search-bar');
searchButton.click(function(){
if(searchBar.hasClass('searchbar-visible')){
searchButton.removeClass('searchbar-visible');
searchBar.animate({opacity:0, left:-200, right:200},200, function(){
$(this).removeClass('searchbar-visible').hide();
});
}else{
searchButton.addClass('searchbar-visible');
searchBar.css('opacity', 0).css('left', -200).css('right',200).show().animate({opacity:1, left:0, right:1},300, function(){
$(this).addClass('searchbar-visible');
var config = {
'.chosen-select-search' : {disable_search_threshold:10, width:'100%'}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
}
});
}
/* Back to top button */
function backToTop(){
var button = $('#back-to-top');
var w_scroll = $(window).scrollTop();
if(w_scroll > 150 && windowWidth>767){
button.fadeIn(400);
}else{
button.fadeOut(400);
}
}
/* Back to top button event */
function backToTopEvent(){
var button = $('#back-to-top');
button.click(function(){
$('html,body').animate({scrollTop:0}, 600);
});
}
/* Tabs */
function tabsOn(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab-content > div').hide();
tab.find('.tab-heading>a:first-child').addClass('active');
tab.find('.tab-content > div:first-child').show();
var tabMenuItems = tab.find('.tab-heading>a');
tabMenuItems.click(function(e){
e.preventDefault();
var target = $(this).attr('href');
tab.find('.tab-content > div').hide();
tab.find('.tab-heading>a').removeClass('active');
$(this).addClass('active');
tab.find(target).show();
});
});
}
/* Accordions */
function accordionsOn(){
$('.accordion').each(function(){
var accordion = $(this);
accordion.find('.accordion-content').hide();
accordion.find('>ul>li:first-child').addClass('accordion-active').find('.accordion-content').show();
accordion.find('.accordion-header').click(function(){
if($(this).parent().hasClass('accordion-active')){
$(this).parent().removeClass('accordion-active');
$(this).parent().find('.accordion-content').slideUp(300);
}else{
$(this).parent().parent().find('li.accordion-active').removeClass('accordion-active').find('.accordion-content').slideUp(300);
$(this).parent().addClass('accordion-active').find('.accordion-content').slideDown(300)
}
});
});
}
/* Select Box Styles */
function selectBox(){
var config = {
'.chosen-select' : {disable_search_threshold:10},
'.chosen-select-full-width' : {disable_search_threshold:10, width:'100%'},
'.chosen-select-search' : {disable_search_threshold:10, width:'100%'}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
}
/* Wuick View */
function quickViewModal(el){
$('body').append('<div id="quick-view-modal"><div id="quick-view-content"><div id="quick-view-close"><i class="fa fa-times"></i></div><div class="quick-view-content"><div class="quick-view-container col-lg-12 col-md-12 col-sm-12"></div></div></div></div>');
$('#quick-view-modal').hide();
$('#quick-view-close').click(function(){
$('#quick-view-modal').fadeOut(300);
});
/* Scroll Bar */
$('.quick-view-content').perfectScrollbar({wheelSpeed: 40, suppressScrollX:true});
var elements = el;
elements.click(function(e){
e.preventDefault();
var target = $(this).attr('href');
$('#quick-view-content .quick-view-container').load(target+' #product-single', function(){
/* Rating Box */
$('#quick-view-modal .rating.readonly-rating').raty({ readOnly: true, path:'js/img',score: function() {
return $(this).attr('data-score');
}});
$('#quick-view-modal .rating.rate').raty({ path:'js/img',score: function() {
return $(this).attr('data-score');
}});
/* Accordions */
var productButtons = $('#quick-view-content .product-actions').not('.full-width');
productButtons.find('>span:first-child').addClass('current');
productButtons.find('>span').hover(function(){
$(this).parent().find('>span').removeClass('current');
$(this).addClass('current');
}, function(){
$(this).removeClass('current');
});
productButtons.hover(function(){
}, function(){
$(this).find('>span:first-child').addClass('current');
});
/* Tabs */
tabsOn();
/* Numeric Input */
$('#quick-view-modal .numeric-input').each(function(){
var el = $(this);
numericInput(el);
});
/* Char Counter */
$('#quick-view-modal .char-counter').each(function(){
var el = $(this);
charCounter(el);
});
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
/* Product Carousel */
$('#quick-view-modal #product-carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
directionNav: false,
slideshow: false,
itemWidth: 80,
itemMargin: 0,
start: function(slider){
setActive($('#product-carousel li:first-child img'));
slider.find('.right-arrow').click(function(){
slider.flexAnimate(slider.getTarget("next"));
});
slider.find('.left-arrow').click(function(){
slider.flexAnimate(slider.getTarget("prev"));
});
slider.find('img').click(function(){
var large = $(this).attr('data-large');
setActive($(this));
$('#product-slider img').fadeOut(300, changeImg(large, $('#product-slider img')));
});
function changeImg(large, element){
var element = element;
var large = large;
setTimeout(function(){ startF()},300);
function startF(){
element.attr('src', large)
element.attr('data-large', large)
element.fadeIn(300);
}
}
function setActive(el){
var element = el;
$('#product-carousel img').removeClass('active-item');
element.addClass('active-item');
}
}
});
$('#quick-view-modal').fadeIn(300);
/* Positioning */
var q_width = $('#quick-view-content').width();
var q_height = $('#quick-view-content').height();
var q_margin = ($(window).height() - q_height)/2;
$('#quick-view-content').css('margin-top',q_margin+'px');
/* Cloud Zoom */
$("#quick-view-modal .cloud-zoom").imagezoomsl({
zoomrange: [3, 3]
});
$('.quick-view-content').perfectScrollbar('update');
$('.quick-view-content').css('overflow','hidden');
$('.quick-view-content').click(function(){
$(this).perfectScrollbar('update');
});
/* Select Box */
var config = {
'#quick-view-content .chosen-select' : {disable_search_threshold:10}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
});
}
/* AJAX FORMS */
/* Newsletter */
$('#newsletter').submit(function(e){
e.preventDefault();
var url = $(this).attr('action');
if($(this).find('input[type="text"]').val() == ''){
if($(this).find('span.error').length==0){
$(this).append('<span class="error">Please, fill in your email address</span>');
}else{
$(this).find('span.error').text('Please, fill in your email address');
}
}else{
$(this).find('span.error').hide();
$.ajax({
type: "POST",
url: url,
data: $('#newsletter').serialize(),
success: function(data){
$('#newsletter').find('>*').slideUp(300);
$('#newsletter').append('<span>'+data+'</span>');
}
});
}
});
/* Contact Form */
$('#contact-form').submit(function(e){
e.preventDefault();
var url = $(this).attr('action');
var error = false;
if($(this).find('input[name="contact-name"]').val()==''){
error = true;
}
if($(this).find('input[name="contact-email"]').val()==''){
error = true;
}
if($(this).find('textarea[name="contact-message"]').val()==''){
error = true;
}
if(error == true){
if($(this).find('span.error').length==0){
$(this).append('<span class="error">Please, fill in all the fields</span>');
}else{
$(this).find('span.error').text('Please, fill in all the fields');
}
}
if(error == false){
$(this).find('span.error').hide();
$.ajax({
type: "POST",
url: url,
data: $('#contact-form').serialize(),
success: function(data){
$('#contact-form').find('>*').slideUp(300);
$('#contact-form').append('<span>'+data+'</span>');
}
});
}
});
/* Numeric Input */
$('.numeric-input').each(function(){
var el = $(this);
numericInput(el);
});
/* Numeric Input */
function numericInput(el){
var element = el;
var input = $(element).find('input');
$(element).find('.arrow-up').click(function(){
var value = parseInt(input.val());
input.val(value+1);
});
$(element).find('.arrow-down').click(function(){
var value = parseInt(input.val());
input.val(value-1);
});
input.keypress(function(e){
var value = parseInt(String.fromCharCode(e.which));
if(isNaN(value)){
e.preventDefault();
}
});
}
/* Char Counter */
$('.char-counter').each(function(){
var el = $(this);
charCounter(el);
});
function charCounter(el){
var element = el;
var counter = $(element).find('input');
var target = $(counter).attr('data-target');
$(target).bind("change paste keyup",function(){
var value = $(this).val();
var length = value.length;
counter.val(length);
});
}
});
//quick view ends<div id="productContainer">
<div align="center" class="product-layout product-grid col-lg-3 col-md-3 col-sm-3 col-xs-12 product-image"><div class="product">
<div class="product-image">
<img src="../image/product/MUKESH KAUSHIK.JPG" class="img-responsive" style="width:250px;height:200px;">
<a href="products_view.php?id=30" class="product-hover" style="width:100%;"><i class="fa fa-eye"></i> Quick View</a></div><div class="caption"><h4>TAta 407</h4><p class="price"><span class="price-new"><i class="fa fa-inr"></i> 1000 </span></p>
</div>
</div>
</div>