尝试整合分页在多个同位素实例上

Question

我一直在尝试使用名为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>

Answer 1

它不起作用，因为您的代码不支持寻呼机的多个实例。我已对您的代码进行了一些修改，以允许多个寻呼机实例。

这是从头开始的，但这绝不是一个干净的解决方案，它需要在安静的几个地方进行清理，尽管如此，它仍可以使您了解为什么当前的代码无法正常工作。

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>