jquery - 试图在多个同位素实例上集成分页
问题描述
我一直在尝试使用名为Isotope.js的库集成过滤器功能。过滤器包含分页功能。我一直在尝试解决如何使分页在多个isotope
实例上工作的问题。似乎分页在使用过滤器时会重复多次,并影响使用分页时存在的其他实例
以下是我目前正在进行的工作示例
var itemSelector = ".products-item";
var $checkboxes = $('.filter-checkbox');
var $container = $('.products-container').isotope({
itemSelector: itemSelector
});
//Ascending order
var responsiveIsotope = [
[480, 3],
[720, 5]
];
var itemsPerPageDefault = 5;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAttribute = 'data-filter';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';
// update items based on current filters
function changeFilter(selector) {
$container.isotope({
filter: selector
});
}
//grab all checked filters and goto page on fresh isotope output
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function(i, elem) {
if (elem.checked) {
selector += (currentFilter != '*') ? '.' + elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.' + wordPage);
changeFilter(filterValue);
}
// determine page breaks based on window width and preset values
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for (var i = 0; i < responsiveIsotope.length; i++) {
if ($(window).width() <= responsiveIsotope[i][0]) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function() {
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function(i, elem) {
if (elem.checked) {
selector += (currentFilter != '*') ? '.' + elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// find each child element with current filter values
$container.children(filterValue).each(function() {
// increment page if a new one is needed
if (item > itemsPerPage) {
page++;
item = 1;
}
// add page number to element as a class
wordPage = page.toString();
var classes = $(this).attr('class').split(' ');
var lastClass = classes[classes.length - 1];
// last class shorter than 4 will be a page number, if so, grab and replace
if (lastClass.length < 4) {
$(this).removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$(this).addClass(classes);
} else {
// if there was no page number, add it
$(this).addClass(wordPage);
}
item++;
});
currentNumberPages = page;
}();
// create page number navigation
var CreatePagers = function() {
var $isotopePager = ($('.' + pagerClass).length == 0) ? $('<div class="' + pagerClass + '"></div>') : $('.' + pagerClass);
$isotopePager.html('');
if (currentNumberPages > 1) {
for (var i = 0; i < currentNumberPages; i++) {
var $pager = $('<a href="javascript:void(0);" class="pager" ' + pageAttribute + '="' + (i + 1) + '"></a>');
$pager.html(i + 1);
$pager.click(function() {
var page = $(this).eq(0).attr(pageAttribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
// remove checks from all boxes and refilter
function clearAll() {
$checkboxes.each(function(i, elem) {
if (elem.checked) {
elem.checked = null;
}
});
currentFilter = '*';
setPagination();
goToPage(1);
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.change(function() {
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
$('#clear-filters').click(function() {
clearAll()
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.centered-component {
width: 100%;
max-width: 1300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding: 100px 0;
}
.centered-component .filter-sidebar {
width: 100%;
max-width: 250px;
margin-right: 24px;
}
.centered-component .content-block {
flex: 1;
}
.filter-sidebar {
display: flex;
flex-direction: column;
}
.products-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 24px;
}
.isotope-container>h2 {
margin-bottom: 48px;
}
.products-item {
position: relative !important;
top: initial !important;
left: initial !important;
}
.products-container {
height: initial !important;
}
.isotope-pager {
margin-top: 42px;
}
.isotope-container+.isotope-container {
margin-top: 64px;
}
<!doctype html>
<html>
<head>
<title>Isotope</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="centered-component">
<div class="filter-sidebar">
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="beige" />
beige
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="green" />
green
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="blue" />
blue
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="orange" />
orange
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="purple" />
purple
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="pink" />
pink
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="teal" />
teal
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="yellow" />
yellow
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="black" />
black
</label>
</div>
<div class="content-block">
<div class="isotope-container">
<h2 class="heading">Category 1</h2>
<ul class="products-container">
<li class="products-item beige">
<h2>beige</h2>
</li>
<li class="products-item green">
<h2>green</h2>
</li>
<li class="products-item blue">
<h2>blue</h2>
</li>
<li class="products-item orange">
<h2>orange</h2>
</li>
<li class="products-item purple">
<h2>purple</h2>
</li>
<li class="products-item pink">
<h2>pink</h2>
</li>
<li class="products-item teal">
<h2>teal</h2>
</li>
<li class="products-item yellow">
<h2>yellow</h2>
</li>
<li class="products-item black ">
<h2>black</h2>
</li>
<li class="products-item beige">
<h2>beige</h2>
</li>
</ul>
</div>
<div class="isotope-container">
<h2 class="heading">Category 1</h2>
<ul class="products-container">
<li class="products-item beige">
<h2>beige</h2>
</li>
<li class="products-item green">
<h2>green</h2>
</li>
<li class="products-item blue">
<h2>blue</h2>
</li>
<li class="products-item orange">
<h2>orange</h2>
</li>
<li class="products-item purple">
<h2>purple</h2>
</li>
<li class="products-item pink">
<h2>pink</h2>
</li>
<li class="products-item teal">
<h2>teal</h2>
</li>
<li class="products-item yellow">
<h2>yellow</h2>
</li>
<li class="products-item black ">
<h2>black</h2>
</li>
<li class="products-item beige">
<h2>beige</h2>
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="filter.js "></script>
</body>
</html>
解决方案
它不起作用,因为您的代码不支持寻呼机的多个实例。我已经稍微修改了您的代码以允许多个寻呼机实例。
这是开始的事情,绝不是一个干净的解决方案,它需要在安静的几个地方进行清理,但它会让你知道你当前的代码为什么不起作用。
var itemSelector = ".products-item";
var $checkboxes = $('.filter-checkbox');
var filterAttribute = 'data-filter';
class IsotopContainer {
constructor(container) {
this.container = $(container);
//Ascending order
this.responsiveIsotope = [
[480, 3],
[720, 5]
];
this.itemsPerPageDefault = 5;
this.itemsPerPage = this.defineItemsPerPage();
this.currentNumberPages = 1;
this.currentPage = 1;
this.currentFilter = '*';
this.filterValue = "";
this.pageAttribute = 'data-page';
this.pagerClass = 'isotope-pager';
this.isotope = this.container.isotope({
itemSelector: itemSelector
});
}
// update items based on current filters
changeFilter(selector) {
this.container.isotope({
filter: selector
});
}
//grab all checked filters and goto page on fresh isotope output
goToPage(n) {
this.currentPage = n;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each((i, elem) => {
if (elem.checked) {
selector += (this.currentFilter != '*') ? '.' + elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
this.filterValue = exclusives.length ? exclusives.join('') : '*';
// add page number to the string of filters
var wordPage = this.currentPage.toString();
this.filterValue += ('.' + wordPage);
this.changeFilter(this.filterValue);
}
// determine page breaks based on window width and preset values
defineItemsPerPage() {
var pages = this.itemsPerPageDefault;
for (var i = 0; i < this.responsiveIsotope.length; i++) {
if ($(window).width() <= this.responsiveIsotope[i][0]) {
pages = this.responsiveIsotope[i][1];
break;
}
}
return pages;
}
setPagination() {
var SettingsPagesOnItems = () => {
var itemsLength = this.container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / this.itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each((i, elem) => {
if (elem.checked) {
selector += (this.currentFilter != '*') ? '.' + elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
this.filterValue = exclusives.length ? exclusives.join('') : '*';
// find each child element with current filter values
this.container.children(this.filterValue).each((i, child) => {
// increment page if a new one is needed
if (item > this.itemsPerPage) {
page++;
item = 1;
}
// add page number to element as a class
var $child = $(child);
var wordPage = page.toString();
var classes = $child.attr('class').split(' ');
var lastClass = classes[classes.length - 1];
// last class shorter than 4 will be a page number, if so, grab and replace
if (lastClass.length < 4) {
$child.removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$child.addClass(classes);
} else {
// if there was no page number, add it
$child.addClass(wordPage);
}
item++;
});
this.currentNumberPages = page;
};
// create page number navigation
var CreatePagers = () => {
var existingPager = this.container.siblings('.' + this.pagerClass);
var $isotopePager = (existingPager.length == 0) ? $('<div class="' + this.pagerClass + '"></div>') : existingPager;
$isotopePager.html('');
if (this.currentNumberPages > 1) {
for (var i = 0; i < this.currentNumberPages; i++) {
var $pager = $('<a href="javascript:void(0);" class="pager" ' + this.pageAttribute + '="' + (i + 1) + '"></a>');
$pager.html(i + 1);
$pager.click(e => {
var page = $(e.target).attr(this.pageAttribute);
this.goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
this.container.after($isotopePager);
};
SettingsPagesOnItems();
CreatePagers();
}
}
var containers = $.map($('.products-container'), c => new IsotopContainer(c));
// remove checks from all boxes and refilter
function clearAll() {
$checkboxes.each(function(i, elem) {
if (elem.checked) {
elem.checked = null;
}
});
containers.forEach(c => {
c.currentFilter = '*';
c.setPagination();
c.goToPage(1);
});
}
containers.forEach(c => {
c.setPagination();
c.goToPage(1);
});
//event handlers
$checkboxes.change(function() {
var filter = $(this).attr(filterAttribute);
containers.forEach(c => {
c.currentFilter = filter;
c.setPagination();
c.goToPage(1);
});
});
$('#clear-filters').click(function() {
clearAll()
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.centered-component {
width: 100%;
max-width: 1300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding: 100px 0;
}
.centered-component .filter-sidebar {
width: 100%;
max-width: 250px;
margin-right: 24px;
}
.centered-component .content-block {
flex: 1;
}
.filter-sidebar {
display: flex;
flex-direction: column;
}
.products-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 24px;
}
.isotope-container>h2 {
margin-bottom: 48px;
}
.products-item {
position: relative !important;
top: initial !important;
left: initial !important;
}
.products-container {
height: initial !important;
}
.isotope-pager {
margin-top: 42px;
}
.isotope-container+.isotope-container {
margin-top: 64px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<div class="centered-component">
<div class="filter-sidebar">
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="beige" />
beige
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="green" />
green
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="blue" />
blue
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="orange" />
orange
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="purple" />
purple
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="pink" />
pink
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="teal" />
teal
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="yellow" />
yellow
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="black" />
black
</label>
</div>
<div class="content-block">
<div class="isotope-container">
<h2 class="heading">Category 1</h2>
<ul class="products-container">
<li class="products-item beige">
<h2>beige</h2>
</li>
<li class="products-item green">
<h2>green</h2>
</li>
<li class="products-item blue">
<h2>blue</h2>
</li>
<li class="products-item orange">
<h2>orange</h2>
</li>
<li class="products-item purple">
<h2>purple</h2>
</li>
<li class="products-item pink">
<h2>pink</h2>
</li>
<li class="products-item teal">
<h2>teal</h2>
</li>
<li class="products-item yellow">
<h2>yellow</h2>
</li>
<li class="products-item black ">
<h2>black</h2>
</li>
<li class="products-item beige">
<h2>beige</h2>
</li>
</ul>
</div>
<div class="isotope-container">
<h2 class="heading">Category 1</h2>
<ul class="products-container">
<li class="products-item beige">
<h2>beige</h2>
</li>
<li class="products-item green">
<h2>green</h2>
</li>
<li class="products-item blue">
<h2>blue</h2>
</li>
<li class="products-item orange">
<h2>orange</h2>
</li>
<li class="products-item purple">
<h2>purple</h2>
</li>
<li class="products-item pink">
<h2>pink</h2>
</li>
<li class="products-item teal">
<h2>teal</h2>
</li>
<li class="products-item yellow">
<h2>yellow</h2>
</li>
<li class="products-item black ">
<h2>black</h2>
</li>
<li class="products-item beige">
<h2>beige</h2>
</li>
</ul>
</div>
</div>
</div>
推荐阅读
- facebook - Facebook:使用公共 URL 共享唯一图像并在本地丢弃图像。是不是一直在FB?
- spring-batch - 为什么不将 Spring Data JPA 与批处理一起使用?
- php - Laravel - 如何使用对象数组制作多过滤器?
- c# - 如何使用 Media Foundation 修复曝光过度的高分辨率照片?
- java - 结合调度器和执行器服务的咖啡因
- javascript - Gem Chartkick 图表未在 PDF 上呈现
- wordpress - WordPress:为什么博客页面的永久链接是最新的博客文章
- python - 在使用 python SDK 创建 Azure VM 时添加 SSH 密钥
- ruby-on-rails - 解析 database.yml 文件时出现 YAML 语法错误
- arrays - c - 与数组函数一起使用时 (int *)s 是什么意思