Question

我正在寻求帮助。大家好。我想添加一些匹配结果div。我的意思是：

当我通过标记/取消标记复选框来过滤元素时，我希望显示一些过滤的报价。例如，如果复选框过滤器给出2个结果，我希望看到显示一些句子。 “我们找到2个结果。”

当过滤不会给出任何结果时，我希望看到以下信息：“未找到结果。”

以下是此过滤器的jsfiddle示例：https://jsfiddle.net/q67oLwbd/2/

<div class="tabela-wrap">
  <label><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
  <label><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
  <label><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
  <label><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
  <label><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
  <label><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
  <label><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
  <label><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label>
</div>

<br><br>

<ul class="tabela">
  <li class="tabelki" data-id="" data-category="1 2 3 4 ">1 2 3 4</li>
  <li class="tabelki" data-id="" data-category="2 3">2 3</li>
  <li class="tabelki" data-id="" data-category="4 5">4 5</li>
  <li class="tabelki" data-id="" data-category="5 6 ">5 6</li>
  <li class="tabelki" data-id="" data-category="5">5</li>
  <li class="tabelki" data-id="" data-category="1 2">1 2</li>
  <li class="tabelki" data-id="" data-category="1 2 3">1 2 3</li>
  <li class="tabelki" data-id="" data-category="7 8">7 8</li>

</ul>

感谢您的帮助。

Answer 1

我按照您的要求包括了结果计数，但是决定重构您的代码以帮助DRY处理并使代码更易于阅读/理解。这样可以将您的220行JS减少到47行，并在jQuery选择器上提供缓存。

$(document).ready(function(){
  // cache ref to all checkbox elements
  var checkboxes = $('input:checkbox'),
      // cache ref to results
      results = $('#results'),
      // cache ref to our list
      listItems = $('.tabela > li'),
      // collection of selected checkbox elements
      selectedItems = [];
  
  checkboxes.on('change', function(){
    var id = this.id;
    
    if(this.checked){
      // push the element vs the value
      selectedItems.push(this.value);
    }else{
      // remove items on uncheck
      selectedItems.splice(selectedItems.indexOf(this.value), 1);
    }

    updateList();
  });

  var updateList = function(){
    // ref all checked checboxes
    var checked = $('input:checkbox:checked'),
        // create map of values for joining
        selectedItemsValues = selectedItems.sort().join(' ');

    if(checked.length){
      // filter list items         
      listItems.hide().filter(function(){
        return this.dataset.category.includes(selectedItemsValues); 
      }).show();
        
      // count visible li only
      var total = $('.tabela li:visible').length;
      // render results
      results.html('We found ' + total + (total === 1 ? ' match' : ' matches' ) + '!');
    }else{
      listItems.show();
      
      results.html('We did not find any matches.');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tabela-wrap">   
  <label for="1"><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
  <label for="2"><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
  <label for="3"><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
  <label for="4"><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
  <label for="5"><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
  <label for="6"><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
  <label for="7"><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
  <label for="8"><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label> 
</div>

<br><br>

<ul class="tabela">
  <li class="tabelki" data-id="" data-category="1 2 3 4">1 2 3 4</li>
  <li class="tabelki" data-id="" data-category="2 3">2 3</li>
  <li class="tabelki" data-id="" data-category="4 5">4 5</li>
  <li class="tabelki" data-id="" data-category="5 6 ">5 6</li>
  <li class="tabelki" data-id="" data-category="5">5</li>
  <li class="tabelki" data-id="" data-category="1 2">1 2</li>
  <li class="tabelki" data-id="" data-category="1 2 3">1 2 3</li>
  <li class="tabelki" data-id="" data-category="7 8">7 8</li>
</ul>

<div id="results"></div>

Codepen

如何将匹配结果添加到过滤器

1 个答案: