Uncaught Error: синтаксическая ошибка, нераспознанное выражение: в коде для mixitup 2

Question

У меня есть приложение, работающее с фильтром, использующим 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">
&euro; <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>`