javascript - 将 'and' 和 'or' 逻辑与下拉菜单和 MixItUp 一起使用

Question

我已经成功地为一些下拉菜单/选择框实现了精彩的 MixItUp 代码。我尝试按照高级教程进行操作，但是使用两种逻辑的教程都使用复选框，并且我不知道如何使其适用于选择框。此外，只有一组选择框需要 OR 逻辑，其余所有选择框都需要 AND。

逻辑如下:

学校科目和最低成绩和最高成绩AND(第一语言或第二语言)。

过滤控件如下:

<form class="controls form-horizontal" id=Filters>
   <fieldset class=MixItUpfilters>
      <legend>Filters</legend>
      <div class=form-group>
         <label for=selectSubject class="col-md-3 control-label">with the school subject of</label>
         <div class=col-md-9>
            <fieldset>
               <select id=selectSubject class="form-control input-sm">
                  <option value="">-- select a school subject --</option>
                  <option value=".subject-1">Subject 1</option>
                  <option value=".subject-2">Subject 2</option>
                  <option value=".subject-3">Subject 3</option>
               </select>
            </fieldset>
         </div>
      </div>
      <div class=form-group>
         <label for=selectMinGrade class="col-md-3 control-label">for grades </label>
         <div class=col-md-9>
            <fieldset class=inline>
               <select id=selectMinGrade class="form-control input-sm">
                  <option value="">-- select a minimum grade --</option>
                  <option value=".min-grade-01">Grade 1</option>
                  <option value=".min-grade-02">Grade 2</option>
                  <option value=".min-grade-03">Grade 3</option>
               </select>
            </fieldset>
            <label>to </label>
            <fieldset class=inline>
               <select id=selectMaxGrade class="form-control input-sm">
                  <option value="">-- select a maximum grade --</option>
                  <option value=".max-grade-01">Grade 1</option>
                  <option value=".max-grade-02">Grade 2</option>
                  <option value=".max-grade-03">Grade 3</option>
               </select>
            </fieldset>
         </div>
      </div>
      <div class=form-group>
         <label for=selectFirstLanguage class="col-md-3 control-label">in First language</label>
         <div class=col-md-9>
            <fieldset class=inline>
               <select id=selectFirstLanguage class="form-control input-sm">
                  <option value="">-- select a language --</option>
                  <option value=".first-language-english">English</option>
                  <option value=".first-language-afrikaans">Afrikaans</option>
                  <option value=".first-language-zulu">Zulu</option>
               </select>
            </fieldset>
            <label>or second language</label>
            <fieldset class=inline>
               <select id=selectSecondLanguage class="form-control input-sm">
                  <option value="">-- select a language --</option>
                  <option value=".second-language-english">English</option>
                  <option value=".second-language-afrikaans">Afrikaans</option>
                  <option value=".second-language-zulu">Zulu</option>
               </select>
            </fieldset>
         </div>
      </div>
   </fieldset>
</form>

JavaScript 是(注意:我使用 jQuery 而不是 $，因为这是一个 WordPress 网站):

<script>
  // To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "dropdownFilter".
  var dropdownFilter = {

      // Declare any variables we will need as properties of the object
      jQueryfilters: null,
      jQueryreset: 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 assign "this" to the variable "self" 
              so that it remains scope-agnostic. We will use it to refer to the parent "dropdownFilter" 
              object so that we can share methods and properties between all parts of the object.
          */ 

          self.jQueryfilters = jQuery('#Filters');
          self.jQueryreset = jQuery('#Reset');
          self.jQuerycontainer = jQuery('#Container');

          self.jQueryfilters.find('fieldset').each(function(){
            self.groups.push({
              jQuerydropdown: jQuery(this).find('select'),
              active: ''
            });
          });

          self.bindHandlers();
        },

      // The "bindHandlers" method will listen for whenever a select is changed. 
      bindHandlers: function(){
          var self = this;

          // Handle select change
          self.jQueryfilters.on('change', 'select', function(e){
              e.preventDefault();
              self.parseFilters();
          });

          // Handle reset click
          self.jQueryreset.on('click', function(e){
            e.preventDefault();
            self.jQueryfilters.find('select').val('');
            self.parseFilters();
          });
      },

      // The parseFilters method pulls the value of each active select option
      parseFilters: function(){
          var self = this;

          // loop through each filter group and grap the value from each one.
          for(var i = 0, group; group = self.groups[i]; i++){
              group.active = group.jQuerydropdown.val();
              }
          self.concatenate();
      },

      // The "concatenate" method will crawl through each group, concatenating filters as desired:
      concatenate: function(){
          var self = this;
          self.outputString = ''; // Reset output string
          for(var i = 0, group; group = self.groups[i]; i++){
          self.outputString += group.active;
          }

      // 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.jQuerycontainer.mixItUp('isLoaded')){
          self.jQuerycontainer.mixItUp('filter', self.outputString);
        }
    }
  };

  // On document ready, initialise our code.
  jQuery(function(){
    // Initialize dropdownFilter code
    dropdownFilter.init();

    // Instantiate MixItUp
    jQuery('#Container').mixItUp({
      controls: {
          enable: false // as we are interacting via the API, we can disable default controls to increase performance
      },
      callbacks: {
        onMixFail: function(){
          console.log('No items were found matching the selected filters.');                    
        }
      },
      layout: {
              containerClassFail: 'none-found'
      }                
    });    
  });
</script>

Answer 1

来自mixitup documentation似乎没有“复杂”逻辑的配置机制。您可以将所有内容“与”或“或”组合在一起。但是，文档至少告诉我们使用此逻辑的语法，这本质上是 CSS 选择器语法，即 .class1.class2 是 class1 AND class2 和 .class1, .class2 是class1 OR class2。如果无法使用配置对象，您将不得不编写自己的串联方法，如下所示

concatenate: function(){
  var self = this;
  self.outputString = ''; // Reset output string
  var anded = self.groups[0].active+self.groups[1].active+self.groups[2].active
  self.outputString = anded+self.groups[3].active+', '+anded+self.groups[4].active
  // outputString will now look like
  // subject.min-grade.max-grade.first-language, subject.min-grade.max-grade.second-language

  // If the output string is empty, show all rather than none:
  !self.outputString.length && (self.outputString = 'all'); 
  console.log(self.outputString); 

  // Send the output string to MixItUp via the 'filter' method:
  if(self.jQuerycontainer.mixItUp('isLoaded')){
    self.jQuerycontainer.mixItUp('filter', self.outputString);
  }
}

这假设您的小组顺序与您在代码上方提到的逻辑字符串匹配，其中第一个选择是主题，第二个最低成绩等。