如何解决ui滑块和多个复选框搜索过滤器
我们可以通过选择多个品牌来完成这项工作吗?目前,它一次获得1个品牌。我们如何使用多个品牌选择来做到这一点,所以如果我检查品牌ankit和honey,那么两个条目都应该显示,并且标签按原样工作。
解决方法
$(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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。