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

Question

我们可以通过选择多个品牌来实现这一点吗。目前，它一次使用1个品牌。我们如何使用多个品牌选择来做到这一点，所以如果我检查品牌ankit和蜂蜜，那么这两个条目都应该显示，标签也可以正常工作。

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>