如何解决带有多个复选框过滤器和滑块的同位素分页
我如何实现分页,请在此处检查小提琴
$(function () {
var $container = $('.grid'),weightSlider = document.getElementById('weight-slider'),sizeSlider = document.getElementById('size-slider'),$weightFrom = $('.weight-from'),$weightTo = $('.weight-to'),$sizefrom = $('.size-from'),$sizeto = $('.size-to'),sizeArray = ['1a','1b','1c','1d','2a','2b','2c','2d','3a','3b'],filters = {},comboFilter;
noUiSlider.create(weightSlider,{
start: [23,27],connect: true,step: 1,range: {
'min': 15,'max': 30
}
});
noUiSlider.create(sizeSlider,{
start: [0,9],range: {
'min': 0,'max': 9
}
});
weightSlider.noUiSlider.on('update',function (values,handle) {
(handle ? $weightTo : $weightFrom).text(parseInt(values[handle]));
$container.isotope({
filter: multipleFilter
});
});
sizeSlider.noUiSlider.on('update',handle) {
(handle ? $sizeto : $sizefrom).text(sizeArray[+values[handle]]);
$container.isotope({
filter: multipleFilter
});
});
$container.isotope({
itemSelector: '.grid-item',masonry: {
columnWidth: '.grid-item',gutter: 15
},filter: multipleFilter
});
// do stuff when checkBox change
$('#options').on('change',function (jQEvent) {
var $checkBox = $(jQEvent.target);
manageCheckBox($checkBox);
comboFilter = getComboFilter(filters);
$container.isotope({
filter: multipleFilter
});
});
function multipleFilter() {
var that = this;
function checkWeight() {
var weight = $(that).find('.weight').text();
weightFrom = parseInt($weightFrom.text()) || 0;
weightTo = parseInt($weightTo.text()) || 0;
weight = parseInt(weight) || 0;
return weight >= weightFrom && weight <= weightTo;
}
function checkSize() {
var size = sizeArray.indexOf($(that).find('.size').text()),sizefrom = sizeArray.indexOf($sizefrom.text()),sizeto = sizeArray.indexOf($sizeto.text());
return size >= sizefrom && size <= sizeto;
}
return checkWeight() && checkSize() && $(this).is(comboFilter || '*');
}
function getComboFilter(filters) {
var i = 0;
var comboFilters = [];
var message = [];
for (var prop in filters) {
message.push(filters[prop].join(' '));
var filterGroup = filters[prop];
// skip to next filter group if it doesn't have any values
if (!filterGroup.length) {
continue;
}
if (i === 0) {
// copy to new array
comboFilters = filterGroup.slice(0);
} else {
var filterSelectors = [];
// copy to fresh array
var groupCombo = comboFilters.slice(0); // [ A,B ]
// merge filter Groups
for (var k = 0,len3 = filterGroup.length; k < len3; k++) {
for (var j = 0,len2 = groupCombo.length; j < len2; j++) {
filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1,2 ]
}
}
// apply filter selectors to combo filters for next group
comboFilters = filterSelectors;
}
i++;
}
var comboFilter = comboFilters.join(',');
return comboFilter;
}
function manageCheckBox($checkBox) {
var checkBox = $checkBox[0];
var group = $checkBox.parents('.option-set').attr('data-group');
// create array for filter group,if not there yet
var filterGroup = filters[group];
if (!filterGroup) {
filterGroup = filters[group] = [];
}
var isAll = $checkBox.hasClass('all');
// reset filter group if the all Box was checked
if (isAll) {
delete filters[group];
if (!checkBox.checked) {
checkBox.checked = 'checked';
}
}
// index of
var index = $.inArray(checkBox.value,filterGroup);
if (checkBox.checked) {
var selector = isAll ? 'input' : 'input.all';
$checkBox.siblings(selector).removeAttr('checked');
if (!isAll && index === -1) {
// add filter to group
filters[group].push(checkBox.value);
}
} else if (!isAll) {
// remove filter from group
filters[group].splice(index,1);
// if unchecked the last Box,check the all
if (!$checkBox.siblings('[checked]').length) {
$checkBox.siblings('input.all').attr('checked','checked');
}
}
}
});
.grid {
margin-top: 50px;
}
.grid-item {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #E14D38;
background: #E14D38;
margin-bottom: 15px;
&.green {
border-color: #068B32;
background: #068B32;
}
&.blue {
border-color: #176DEE;
background: #176DEE;
}
&.rounded {
border-radius: 50%;
}
.weight,.size {
position: absolute;
width: 30%;
padding: 15% 0;
margin: 0;
text-align: center;
background: #fff;
border-radius: 50%;
font: bold 12px/0 Arial;
}
.weight {
top: 0;
left: 0;
background: #595959;
color: #fff;
}
.size {
bottom: 0;
right: 0;
width: 40%;
padding: 20% 0;
background: #FFBA04;
}
}
.weight-from,.weight-to,.size-from,.size-to {
display: inline-block;
width: 30px;
border-radius: 50%;
line-height: 0;
padding: 15px 0;
text-align: center;
}
.weight-from,.weight-to {
background: #595959;
color: #fff;
}
.size-from,.size-to {
background: #FFBA04;
color: #000;
}
.weight-slider {
.noUi-connect {
background: #595959;
}
}
.size-slider {
.noUi-connect {
background: #FFBA04;
}
}
.noUi-handle {
border-color: #BCBCBC;
&:before,&:after {
background: #BCBCBC;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="https://rawgit.com/leongersen/noUiSlider/master/distribute/nouiSlider.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/leongersen/noUiSlider/master/distribute/nouiSlider.min.css" />
<h3>Вес</h3>
<div id="weight-slider" class="weight-slider"></div>
<p> <span class="weight-from"></span>-<span class="weight-to"></span>
</p>
<h3>Размер</h3>
<div id="size-slider" class="size-slider"></div>
<p> <span class="size-from"></span>-<span class="size-to"></span>
</p>
<h3>Тип</h3>
<div id="options">
<div class="option-set" data-group="color">
<input type="checkBox" value="" id="color-all" class="all" checked />
<label for="color-all">all brands</label>
<input type="checkBox" value=".green" id="green" />
<label for="green">green</label>
<input type="checkBox" value=".red" id="red" />
<label for="red">red</label>
<input type="checkBox" value=".blue" id="blue" />
<label for="blue">blue</label>
</div>
<div class="option-set" data-group="type">
<input type="checkBox" value="" id="type-all" class="all" checked />
<label for="type-all">all types</label>
<input type="checkBox" value=".rounded" id="rounded" />
<label for="rounded">rounded</label>
<input type="checkBox" value=".square" id="square" />
<label for="square">square</label>
</div>
</div>
<div class="grid">
<div class="grid-item red rounded">
<p class="weight">21</p>
<p class="size">1b</p>
</div>
<div class="grid-item red square">
<p class="weight">24</p>
<p class="size">1a</p>
</div>
<div class="grid-item green rounded">
<p class="weight">25</p>
<p class="size">2b</p>
</div>
<div class="grid-item blue rounded">
<p class="weight">26</p>
<p class="size">1c</p>
</div>
<div class="grid-item green square">
<p class="weight">21</p>
<p class="size">3b</p>
</div>
<div class="grid-item green square">
<p class="weight">28</p>
<p class="size">1d</p>
</div>
<div class="grid-item blue rounded">
<p class="weight">29</p>
<p class="size">2c</p>
</div>
<div class="grid-item blue square">
<p class="weight">30</p>
<p class="size">2d</p>
</div>
<div class="grid-item red rounded">
<p class="weight">22</p>
<p class="size">3a</p>
</div>
<div class="grid-item blue rounded">
<p class="weight">22</p>
<p class="size">2a</p>
</div>
<div class="grid-item green square">
<p class="weight">23</p>
<p class="size">1b</p>
</div>
<div class="grid-item blue square">
<p class="weight">24</p>
<p class="size">2c</p>
</div>
<div class="grid-item blue rounded">
<p class="weight">25</p>
<p class="size">3b</p>
</div>
<div class="grid-item red square">
<p class="weight">26</p>
<p class="size">1d</p>
</div>
</div>
也请帮助我进行分页小提琴https://jsfiddle.net/gw65vrj2/ 我已经尝试了很多同位素分页脚本,但是我无法使它与分页一起使用。 请让我知道,我该怎么做。我正在查看https://jsfiddle.net/acr8pk01/2/,但不确定如何在我的工作脚本中实现这一点。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。