javascript - 使用 jQuery 过滤图像

Question

我有一个投资组合页面

我有过滤按钮

<div class="clearfix">
  <div class="cbp-l-filters-button cbp-l-filters-left">
    <div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
    <div data-filter=".personal" class="cbp-filter-item">Personal</div>
    <div data-filter=".professional" class="cbp-filter-item">Professional</div>
    <div data-filter=".freelance" class="cbp-filter-item">Freelance</div>
  </div>
</div>

我的过滤器按钮似乎不起作用，我不确定出了什么问题。

---

jQuery

$('.gallery').cubeportfolio({
  filters: '.gallery,.cbp-item',
  loadMore: '#js-loadMore-lightbox-gallery',
  loadMoreAction: 'click',
  layoutMode: 'grid',
  mediaQueries: [{
    width: 1500,
    cols: 5
  }, {
    width: 1100,
    cols: 4
  }, {
    width: 800,
    cols: 3
  }, {
    width: 480,
    cols: 2
  }, {
    width: 320,
    cols: 1
  }],
  defaultFilter: '*',
  animationType: 'rotateSides',
  gapHorizontal: 10,
  gapVertical: 10,
  gridAdjustment: 'responsive',
  caption: 'zoom',
  displayType: 'sequentially',
  displayTypeSpeed: 100,

  // lightbox
  lightboxDelegate: '.cbp-lightbox',
  lightboxGallery: true,
  lightboxTitleSrc: 'data-title',

});

---

HTML

<div class="gallery cbp cbp-caption-active cbp-caption-zoom cbp-ready" style="height: 1347px;"><div class="cbp-wrapper-outer"><div class="cbp-wrapper">   

  <div class="col-xs-6 col-sm-2 img-pop cbp-item personal" style="padding: 0px !important; margin: 0px !important; width: 277px; left: 0px; top: 0px;"><div class="cbp-item-wrapper">
   <a href="/assets/img/portfolio/13/1519524545-0-13.png">
     <img class="hvr-shrink" src="/assets/img/portfolio/13/1519524545-0-13.png">
   </a>
 </div></div>

  <div class="col-xs-6 col-sm-2 img-pop cbp-item professional" style="padding: 0px !important; margin: 0px !important; width: 277px; left: 287px; top: 0px;"><div class="cbp-item-wrapper">
   <a href="/assets/img/portfolio/29/1519600525-0-29.jpg">
     <img class="hvr-shrink" src="/assets/img/portfolio/29/1519600525-0-29.jpg">
   </a>
 </div></div>

</div>

如何进一步调试？

Answer 1

filters 属性应该是包含过滤器按钮的父元素的 css 选择器。您当前有 .gallery,.cbp-item，它们都不是按钮的父元素。

要修复，只需为按钮的父元素应用正确的选择器，例如

 filters: '.cbp-l-filters-button',

cubeportfolio() 方法的各种选项的说明应该在您下载的包中收到的文档中