使用jQuery过滤图像

Question

我有一个投资组合页面

我有过滤器按钮

function settledateValidator(min: Date): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } => {

    var sd = new Date(control.value);

    console.log(min);  //minDate does not change. it is still equal to its default value.

    if (sd < min){
      return {invalid_toosmall: true};
    }
  };
}

export class MyformComponent implements OnInit {

  minDate = new Date(2018, 8, 3);

  constructor(fb: FormBuilder) {

    this.myform_fg = fb.group({
      'd1': ['', Validators.compose([Validators.required])],
      'd2': ['', Validators.compose([Validators.required, settledateValidator(this.minDate)])],
    });

    this.d1 = this.myform_fg.controls['d1'];
    this.d2 = this.myform_fg.controls['d2'];

  }

  onChange(value: string): void {
    this.minDate = this.d1.value;
  }

}

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

---

jQuery

<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>

---

HTML

$('.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',

});

如何进一步调试？

Answer 1

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

要解决此问题，只需为按钮的父元素应用正确的选择器，例如

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

cubeportfolio()方法的各种选项的解释应该在与下载的软件包一起收到的文档中

Answer 2

由于多维数据集产品组合是付费插件，因此文档并非完全可以免费在线免费获得，但是I found some docs *，我想我知道这是怎么回事。试试吧。

首先，我认为您需要为包含过滤器链接的div添加一个ID

<div class="clearfix">
  <div class="cbp-l-filters-button cbp-l-filters-left" id="filter-container">
    <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中，filters属性值应设置为filters: '#filter-container',。

尝试一下，让我知道它是否可以解决您的问题。

更新：正如Patrick所正确指出的那样，实际上不需要添加ID，只需将filter属性值更改为该容器div上的一个类即可。例如cbp-l-filters-button就可以完成这项工作。

---

*似乎其他人购买了多维数据集组合插件，而只是将整个目录上传到他们的服务器，而没有删除文档