我有一个使用 Mixitup 2 的过滤器运行的应用程序，我的过滤器适用于平板电脑和台式机的代码，但我的移动代码失败。我找不到我收到错误的原因：
Uncaught Error: Syntax error, unrecognized expression: ,.gemotoriseerd,.sportief"
我正在使用给定错误来自的 jquery-1.11.1.js。
错误来自这行代码。
Sizzle.error = function( msg ) {
throw new Error( "Syntax error, unrecognized expression: " + msg );
};
我没有更改主 jquery 文件中的任何内容，下面的代码来自过滤器。
移动代码
var p = document.getElementById("mobileRange"),
res = document.getElementById("mobileOutput");
p.addEventListener("input", function () {
$("#mobileOutput").html(p.value);
var classes = "";
var minimal = 0;
var maximal = p.value;
$("input[type='range']#mobileRange").attr({'data-filter': "."+ maximal});
$("input[type=checkbox].mobileBudget").val('.'+maximal);
$( ".active" ).each(function( index ) {
var thisClass = $(this).attr("data-filter");
if (thisClass == '#mobileMix.activiteiten') {
} else {
if (thisClass != 'undefined') {
classes += thisClass + ',';
}
}
});
if (classes.length > 0) {
var classeslength = classes.length;
var replaced = classes.replace('undefined', '');
var matching = 0;
var arrClasses = replaced.split(",")
}
}, true);
p.addEventListener("change", function() {
var $show = $('#mobileFilterContainer').find('#mobileMix.activiteiten').filter(function(){
var price = Number($(this).attr('data-budget'));
if (classes.length == 0) {
return price >= minimal && price <= maximal;
} else {
for (index = 0; index < arrClasses.length; index++) {
var thisValue = arrClasses[index].replace('.', '');
if ($(this).hasClass(thisValue) && price >= minimal && price <= maximal) {
matching = 1;
return (price >= minimal && price <= maximal);
}
}
}
});
$('#mobileFilterContainer').mixItUp('filter', $show);
}, true);
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "checkboxFilter".
var checkboxFilter = {
// Declare any variables we will need as properties of the object
$filters: null,
$reset: null,
groups: [],
outputArray: [],
outputString: '',
// The "init" method will run on document ready and cache any jQuery objects we will need.
init: function(){
var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "checkboxFilter" object so that we can share methods and properties between all parts of the object.
self.$filters = $('#mobileFilters');
self.$reset = $('#Reset');
self.$container = $('#mobileFilterContainer');
self.$filters.find('fieldset').each(function(){
self.groups.push({
$inputs: $(this).find('input'),
active: [],
tracker: false
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a form value changes.
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});
},
// The parseFilters method checks which filters are active in each group:
parseFilters: function(){
var self = this;
// loop through each filter group and add active filters to arrays
for(var i = 0, group; group = self.groups[i]; i++){
group.active = []; // reset arrays
group.$inputs.each(function(){
$(this).is(':checked') && group.active.push(this.value);
$('#mobile-ck-button .' + $(this).is(':checked')).addClass('easyactivetop');
});
group.active.length && (group.tracker = 0);
}
self.concatenate();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function(){
var self = this,
cache = '',
crawled = false,
checkTrackers = function(){
var done = 0;
for(var i = 0, group; group = self.groups[i]; i++){
(group.tracker === false) && done++;
}
return (done < self.groups.length);
},
crawl = function(){
for(var i = 0, group; group = self.groups[i]; i++){
group.active[group.tracker] && (cache += group.active[group.tracker]);
if(i === self.groups.length - 1){
self.outputArray.push(cache);
cache = '';
updateTrackers();
}
}
},
updateTrackers = function(){
for(var i = self.groups.length - 1; i > -1; i--){
var group = self.groups[i];
if(group.active[group.tracker + 1]){
group.tracker++;
break;
} else if(i > 0){
group.tracker && (group.tracker = 0);
} else {
crawled = true;
}
}
};
self.outputArray = []; // reset output array
do{
crawl();
}
while(!crawled && checkTrackers());
self.outputString = self.outputArray.join();
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = '.all');
//console.log(self.outputString);
// ^ we can check the console here to take a look at the filter string that is produced
// Send the output string to MixItUp via the 'filter' method:
if(self.$container.mixItUp('isLoaded')){
self.$container.mixItUp('filter', self.outputString);
$('.mix.arrangementen').hide();
}
}
};
// On document ready, initialise our code.
$(document).ready(function() {
// Initialize checkboxFilter code
checkboxFilter.init();
// Instantiate MixItUp
$('#mobileFilterContainer').mixItUp({
load: {
filter: '.all',
sort: 'populariteit:desc'
},
controls: {
toggleFilterButtons: true,
toggleLogic: 'or',
enable: false // we won't be needing these
},
debug: {
enable: true // we won't be needing these
},
animation: {
duration: 400,
effects: 'fade translateZ(-360px) stagger(34ms)',
easing: 'ease',
enable: false,
},
callbacks: {
onMixStart: function(state, futureState){
$('.mix.arrangementen').hide();
var filterstate= $.cookie("filterstate");
if (filterstate=="false") {
//geen wijziging aan de filterbalk in zijn positie
$.removeCookie("filterstate");
}else{
//wijziging aan de filterbalk in zijn positie
id='mobileContent';
$('html,body').animate({scrollTop: $("."+id).offset().top - 50} ,'slow');
$.cookie("filterstate", "false", 1);
}
$('#filtersContainerNav').addClass('activeHeader');
}
}
});
}); ``
平板电脑和桌面代码
`var p = document.getElementById("range"),
res = document.getElementById("output");
p.addEventListener("input", function () {
$("output").html(p.value);
var classes = "";
var minimal = 0;
var maximal = p.value;
$("input[type='range']").attr({'data-filter': "."+ maximal});
$("input[type=checkbox].budget").val('.'+maximal);
$( ".active" ).each(function( index ) {
var thisClass = $(this).attr("data-filter");
if (thisClass == '#mix.activiteiten') {
} else {
if (thisClass != 'undefined') {
classes += thisClass + ',';
}
}
});
if (classes.length > 0) {
var replaced = classes.replace('undefined', '');
var matching = 0;
var arrClasses = replaced.split(",")
}
}, true);
p.addEventListener("change", function() {
var $show = $('#FilterContainer').find('#mix.activiteiten').filter(function(){
var price = Number($(this).attr('data-budget'));
if (classes.length == 0) {
return price >= minimal && price <= maximal;
} else {
for (index = 0; index < arrClasses.length; index++) {
var thisValue = arrClasses[index].replace('.', '');
if ($(this).hasClass(thisValue) && price >= minimal && price <= maximal) {
matching = 1;
return (price >= minimal && price <= maximal);
}
}
}
});
$('#FilterContainer').mixItUp('filter', $show);
}, true);
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "checkboxFilter".
var checkboxFilter = {
// Declare any variables we will need as properties of the object
$filters: null,
$reset: null,
groups: [],
outputArray: [],
outputString: '',
// The "init" method will run on document ready and cache any jQuery objects we will need.
init: function(){
var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "checkboxFilter" object so that we can share methods and properties between all parts of the object.
self.$filters = $('#Filters');
self.$reset = $('#Reset');
self.$container = $('#FilterContainer');
self.$filters.find('fieldset').each(function(){
self.groups.push({
$inputs: $(this).find('input'),
active: [],
tracker: false
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a form value changes.
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});
},
// The parseFilters method checks which filters are active in each group:
parseFilters: function(){
var self = this;
// loop through each filter group and add active filters to arrays
for(var i = 0, group; group = self.groups[i]; i++){
group.active = []; // reset arrays
group.$inputs.each(function(){
$(this).is(':checked') && group.active.push(this.value);
$('#ck-button .' + $(this).is(':checked')).addClass('easyactivetop');
});
group.active.length && (group.tracker = 0);
}
self.concatenate();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function(){
var self = this,
cache = '',
crawled = false,
checkTrackers = function(){
var done = 0;
for(var i = 0, group; group = self.groups[i]; i++){
(group.tracker === false) && done++;
}
return (done < self.groups.length);
},
crawl = function(){
for(var i = 0, group; group = self.groups[i]; i++){
group.active[group.tracker] && (cache += group.active[group.tracker]);
if(i === self.groups.length - 1){
self.outputArray.push(cache);
cache = '';
updateTrackers();
}
}
},
updateTrackers = function(){
for(var i = self.groups.length - 1; i > -1; i--){
var group = self.groups[i];
if(group.active[group.tracker + 1]){
group.tracker++;
break;
} else if(i > 0){
group.tracker && (group.tracker = 0);
} else {
crawled = true;
}
}
};
self.outputArray = []; // reset output array
do{
crawl();
}
while(!crawled && checkTrackers());
self.outputString = self.outputArray.join();
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = '.all');
//console.log(self.outputString);
// ^ we can check the console here to take a look at the filter string that is produced
// Send the output string to MixItUp via the 'filter' method:
if(self.$container.mixItUp('isLoaded')){
self.$container.mixItUp('filter', self.outputString);
$('.mix.arrangementen').hide();
}
}
};
// On document ready, initialise our code.
$(document).ready(function() {
// Initialize checkboxFilter code
checkboxFilter.init();
// Instantiate MixItUp
$('#FilterContainer').mixItUp({
load: {
filter: '.all',
sort: 'populariteit:desc'
},
controls: {
toggleFilterButtons: true,
toggleLogic: 'or',
enable: false // we won't be needing these
},
debug: {
enable: false // we won't be needing these
},
animation: {
duration: 400,
effects: 'fade translateZ(-360px) stagger(34ms)',
easing: 'ease',
enable: false,
},
callbacks: {
onMixStart: function(state, futureState){
$('.mix.arrangementen').hide();
var filterstate= $.cookie("filterstate");
if (filterstate=="false") {
//geen wijziging aan de filterbalk in zijn positie
$.removeCookie("filterstate");
}else{
//wijziging aan de filterbalk in zijn positie
id='content';
$('html,body').animate({scrollTop: $("."+id).offset().top - 50} ,'slow');
$.cookie("filterstate", "false", 1);
}
$('#filtersContainerNav').addClass('activeHeader');
}
}
});
}); `
以下代码来自html
`
<div id="mobileFiltersContainerNav" class="mobile-filters-container">
<div class="filtertitle open">
Filter activiteiten <span class="open"><img src="<?php echo site_url(); ?>/wp-content/themes/plezierenzo/images/filter_arrow_up.png"/></span>
</div>
<div class="filtertitle closed hide">
Filter activiteiten
<span class="closed"><img src="<?php echo site_url(); ?>/wp-content/themes/plezierenzo/images/filter_arrow_down.png"/></span>
</div>
<form class="controls" id="mobileFilters">
<fieldset>
<div class="budget">
<input type="range" id="mobileRange" name="range" min="1" max="100" step="1" value="100" class="filter" data-filter="">
<div class="outputpricerange">
€ <output for="mobileRange" id="mobileOutput">100</output>
</div>
<div class="checkbox">
<input type="checkbox" class="mobileBudget hide" value="" checked/>
</div>
</div>
<div class="categories">
<div id="mobile-ck-button" class="category all" for="all">
<div class="checkbox"> <label>
<input type="checkbox" name="all" value=".all"/>
<span for="all">alle</span></label>
</div>
</div>
<?php
foreach ($all_categories as $cat) {
//print_r($cat);
if($cat->category_parent == 0) {
$category_id = $cat->term_id;
?>
<?php
echo '
<div id="mobile-ck-button" class="category '.$cat->name .'" for="'.$cat->name .'">
<div class="checkbox"> <label>
<input type="checkbox" name="'.$cat->name .'" value=".'.$cat->name.'"/>
<span for="'.$cat->name .'">'.$cat->name .'</span></label>
</div>
</div>';
}
}
?>
</div>
</fieldset>
</form>
</div>`