Question

我们可以通过选择多个品牌来完成这项工作吗？目前，它一次获得1个品牌。我们如何使用多个品牌选择来做到这一点，所以如果我检查品牌ankit和honey，那么两个条目都应该显示，并且标签按原样工作。

Answer 1

$(document).ready(function(){
      // cache ref to all checkbox elements
      var checkboxes = $('input:checkbox[name^="mchkboxs"]'),
      checkboxes2 = $('input:checkbox[name^="f1"]'),
          // cache ref to results
          //results = $('#results'),
          // cache ref to our list
          listItems = $('.tabela > li'),
          // cache amount ref
          amount = $('#amount'),
          // collection of selected checkbox elements
          selectedItems = [],
          selectedItems2 = [],
          // slider config
          slideOptions = {
            min: 0,
            max: 100000,
            step: 20,
            values: [10000],
            slide: function(event, ui) {
              amount.val(ui.values[0] + " USD");
            },
            change: function(event, ui) {
              updateList();
            }
          };
          
      // render our slider      
      var slider = $("#price").slider(slideOptions);
      
      amount.val($("#price").slider("values", 0) + " USD");
      
      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();
      });
      
      checkboxes2.on('change', function(){
        var id = this.id;

        if(this.checked){
          // push the element vs the value
          selectedItems2.push(this.value);
        }else{
          // remove items on uncheck
          selectedItems2.splice(selectedItems2.indexOf(this.value), 1);
        }

        updateList();
      });

      var updateList = function(){
        // create map of values for joining
        var selectedItemsValues = selectedItems.sort().join('*'),
        selectedItemsValues2 = selectedItems2.sort().join('*'),
            // min value
                  minPrice = slider.slider('values', 0);
        
        console.log(selectedItemsValues);
        console.log(selectedItemsValues2);
        // filter list items         
        listItems.hide().filter(function(){
          // get data attributes
          var data = this.dataset;
          // restrict list to price band and selections
          
          return Number(data.price) >= minPrice && (selectedItems.length ? data.category.includes(selectedItemsValues) : true) && (selectedItems2.length ? data.vendor.includes(selectedItemsValues2) : true);
         
        })
        .show();

      }
      
     
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="amount" readonly>

<div class="slider" id="price"></div><br>



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

<div class="tabela-wrap"> 
<h2>Brands</h2>  
  <label for="1"><input type="checkbox" name="f1-1" value="honey" id="honey" /> honey</label>
  <label for="2"><input type="checkbox" name="f1-1" value="ankit" id="ankit" /> ankit</label>
  
</div>

<br><br>

<ul class="tabela lokata" id="products">
  <li class="tabelki" data-vendor="honey" data-price="10000" data-category="1*2*3*4* ">10 000 USD contains 1 2 3 4</li>
  <li class="tabelki" data-vendor="honey" data-price="12000" data-category="2*3">12 000 USD contains 2 3</li>
  <li class="tabelki" data-vendor="honey" data-price="13000" data-category="4*5">13 000 USD contains 4 5</li>
  <li class="tabelki" data-vendor="honey" data-price="14000" data-category="5*6 ">14 000 USD contains 5 6</li>
  <li class="tabelki" data-vendor="ankit" data-price="12000" data-category="5">12 000 USD contains 5</li>
  <li class="tabelki" data-vendor="ankit" data-price="14000" data-category="1*2">14 000 USD contains 1 2</li>
  <li class="tabelki" data-vendor="ankit" data-price="16000" data-category="1*2*3">16 000 USD contains 1 2 3</li>
  <li class="tabelki" data-vendor="ankit" data-price="20000" data-category="7*8">20 000 USD contains 7 8</li>
</ul>

<div id="results"></div>

ui滑块和多个复选框搜索过滤器

1 个答案: