Jquery Fancybox 3：动态更改数据Fancybox组

我正在使用过滤库和数据fancybox对排序后的有效项目进行分组，但在我更改过滤器后，它似乎不起作用

在我得到我的验证项目后，我相应地更改了数据fancybox属性，但fancybox似乎只在页面加载时起作用

有什么想法吗

JS:

函数库（）{
this.tag=$（'.tags list.tag'）；
this.gridItem=$（'.grid.grid item'）；
this.activeTags=['toate']；
this.itemsList=[]；
this.activeItems=[]；
this.noItem=false；
this.init（）；
}
Gallery.prototype.init=函数（）{
这个。砖石（）；
this.itemsListGen（）；
};
Gallery.prototype.itemsListGen=函数（）{
var_this=这个；
$（this.gridItem）。每个（函数（）{
var-tags=$（this.attr（'data-tag'）；
tags=tags.trim（）；
//使用每个项目的id和标记创建对象数组
_这个.itemsList.push({
'id'：$（this.attr（'id'），
“标记”：标记。拆分（“”）
});
});
};
Gallery.prototype.mashine=功能（）{
$（'.grid'）。砌体({
//选择权
columnWidth:“.grid sizer”，
itemSelector:“.grid项”，
位置：正确，
哈希：false
});
};
Gallery.prototype.tagClick=函数（e）{
e、 预防默认值（）；
//currentTag具有单击的标记
var currentTag=$（e.currentTarget）.attr（'data-tag-slug'）；
$（e.currentTarget）.toggleClass（'active'）；
if（this.noItem）{
$（'.no item'）.remove（）；
this.noItem=false；
}
//刷新当前过滤器
此.refreshTags（currentTag）；
if（$（e.currentTarget.attr（'data-tag-slug'）==='toate'| | this.activeTags.length<1）{
this.showAll（）；
}否则{
//返回基于筛选器的已验证项目
this.returnValidItems（）；
//使用当前项目刷新布局
这个；
}
这个。刷新库（）；
};
Gallery.prototype.refreshTags=函数（e）{
//检查当前标记是否已处于活动状态
//如果它是活动的，它将删除它并检查是否有任何其他活动标记或是否应触发“toate”
//如果它不是活动的，它会将其添加到activeTags并删除“toate”
if（this.activeTags.includes（e））{
this.activeTags.splice（this.activeTags.indexOf（e），1）；
}否则{
this.activeTags.push（e）；
if（this.activeTags.includes（'toate'））{
这个。除去燕麦（）；
}
}
};
Gallery.prototype.refreshGallery=函数（）{
$（文档）.unbind（'click.fb start'）；
var_this=这个；
$（this.gridItem）.find（'a'）.attr（'data-fancybox'，'galerie'）；
对于（var i=0；ia'）.removeClass（'active'）；
this.activeTags.splice（this.activeTags.indexOf（'toate'），1）；
};
Gallery.prototype.noItemFound=函数（）{
this.noItem=true；
$（'.grid'）.prepend（'Nu existănicio pozăconform selecţiei'）；
};
$（文档）.ready（函数（）{
var gallery=newgallery（）；
$（'.tags list.tag a'）。在（'click'，$.proxy（gallery.tagClick，gallery））；
}); 

你最终解决了这个问题吗？你最终解决了这个问题吗？

function Gallery() {
    this.tag = $('.tags-list .tag');
    this.gridItem = $('.grid .grid-item');
    this.activeTags = ['toate'];
    this.itemsList = [];
    this.activeItems = [];
    this.noItem = false;
    this.init();
}

Gallery.prototype.init = function () {
    this.masonry();
    this.itemsListGen();
};

Gallery.prototype.itemsListGen = function () {
    var _this = this;

    $(this.gridItem).each(function () {

        var tags = $(this).attr('data-tag');
        tags = tags.trim();

        // creates an array of objects with every item's id and tags
        _this.itemsList.push({
            'id': $(this).attr('id'),
            'tags': tags.split(' ')
        });
    });

};

Gallery.prototype.masonry = function () {
    $('.grid').masonry({
        // options
        columnWidth: '.grid-sizer',
        itemSelector: '.grid-item',
        percentPosition: true,
        hash: false

    });
};

Gallery.prototype.tagClick = function (e) {
    e.preventDefault();
    // currentTag has the clicked tag
    var currentTag = $(e.currentTarget).attr('data-tag-slug');
    $(e.currentTarget).toggleClass('active');

    if (this.noItem) {
        $('.no-item').remove();
        this.noItem = false;
    }

    // refresh current filters
    this.refreshTags(currentTag);

    if ($(e.currentTarget).attr('data-tag-slug') === 'toate' || this.activeTags.length < 1) {
        this.showAll();
    } else {

        // return validated items based on filters
        this.returnValidItems();

        // refresh the layout with the current items
        this.refreshMasonry();
    }

    this.refreshGallery();
};

Gallery.prototype.refreshTags = function (e) {
    // checks if the current tag is already active
    // if it's active, it removes it and checks if there is any other active tag or should trigger 'toate'
    // if it's not active, it adds it to the activeTags and removes 'toate'

    if (this.activeTags.includes(e)) {
        this.activeTags.splice(this.activeTags.indexOf(e), 1);

    } else {
        this.activeTags.push(e);

        if (this.activeTags.includes('toate')) {
            this.removeToate();
        }
    }

};

Gallery.prototype.refreshGallery = function () {
    $(document).unbind('click.fb-start');

    var _this = this;
    $(this.gridItem).find('a').attr('data-fancybox', 'galerie');
    for (var i = 0; i < this.activeItems.length; i++) {
        var id = _this.activeItems[i];
        $('#' + id).find('a').attr('data-fancybox', _this.activeTags);
    }

    $(this.gridItem).find('a').fancybox();
};

Gallery.prototype.returnValidItems = function () {
//    debugger;
    var newValidatedItems = [];

    for (var i = 0; i < this.itemsList.length; i++) {
        var itemTags = this.itemsList[i].tags;

        for (var j = 0; j < this.activeTags.length; j++) {
            if (itemTags.includes(this.activeTags[j])) {
                if (!newValidatedItems.includes(this.itemsList[i].id)) {
                    newValidatedItems.push(this.itemsList[i].id);
                }
            } else if (newValidatedItems.includes(this.itemsList[i].id)) {
                newValidatedItems.splice(newValidatedItems.indexOf(this.itemsList[i].id), 1);
                break;
            } else {
                break;
            }
        }
    }

    this.activeItems = newValidatedItems;
    if (this.activeItems.length < 1) {
        this.noItemFound();
    }
};

Gallery.prototype.refreshMasonry = function () {
    $('.grid-item').hide();

    for (var i = 0; i < this.activeItems.length; i++) {
        $('#' + this.activeItems[i]).show();
    }

    $('.grid').masonry();
};

Gallery.prototype.showAll = function () {
    console.log('show all');
    this.activeTags = ['toate'];
    this.activeItems = [];
    $('.grid-item').show();
    $('.tags-list').find('.active').removeClass('active');
    $('.tags-list').find('.toate a').addClass('active');
    $('.grid').masonry();
};

Gallery.prototype.removeToate = function () {
    $('.tags-list li.toate > a').removeClass('active');
    this.activeTags.splice(this.activeTags.indexOf('toate'), 1);
};

Gallery.prototype.noItemFound = function () {
    this.noItem = true;
    $('.grid').prepend('<div class="no-item text-center">Nu există nicio poză conform selecţiei</div>');
};

$(document).ready(function () {
    var gallery = new Gallery();
    $('.tags-list .tag a').on('click', $.proxy(gallery.tagClick, gallery));

});