Javascript 使用jQuery删除和添加fancybox2的数据属性

我正在尝试使用fancybox向WordPress站点添加一个可过滤的“图库”。元素使用rel和data fancybox group进行分组。数据属性优先于rel组。是否有一种方法可以在单击除“all”筛选器之外的任何其他筛选器时删除data fancybox group data属性。如果单击了“全部”筛选器，则如果数据fancybox group=“all”不存在，则应添加该数据

<ul id="portfolio-filter">
    <li> <a href="#all" class="filter all active" data-filter"all"> All </a> </li>
    <li> <a href="#filter-1" class="filter" data-filter".filter-1"> Filter 1 </a> </li>
    <li> <a href="#filter-2" class="filter" data-filter".filter-2"> Filter 2 </a> </li>
</ul>

<div id="portfolio-wrapper" class="row">
    <div id="portfolio" class="p_container">
        <ul id="portfolio-list">
            <li class="portfolio-item mix filter-1">
                <a class="fancybox thumbnail" data-fancybox-group="all" rel="filter1">
                    <img src="..." />
                </a>
            </li>
            <li class="portfolio-item mix filter-1">
                <a class="fancybox thumbnail" data-fancybox-group="all" rel="filter1">
                    <img src="..." />
                </a>
            </li>
            <li class="portfolio-item mix filter-2">
                <a class="fancybox thumbnail" data-fancybox-group="all" rel="filter2">
                    <img src="..." />
                </a>
            </li>
            <li class="portfolio-item mix filter-2">
                <a class="fancybox thumbnail" data-fancybox-group="all" rel="filter2">
                    <img src="..." />
                </a>
            </li>
        </ul>
    </div>
</div>

编辑：我想出了一个解决办法。请随意推荐一种更好的方法

<script>
        jQuery(function(){
                jQuery(".filter").click(function()
                {
                        if(!jQuery(this).hasClass('all') ){
                            alert('This is NOT THEALL filter!');
                            jQuery( ".fancybox.thumbnail" ).each(function() {
                                if(jQuery(this).attr('data-fancybox-group')) {

                                    jQuery(this).attr("data-fancybox-group", "");
                                }
                            });

                        }
                        else{
                                //alert('This is the ALL assigned Filter!');
                                if (!jQuery( ".fancybox.thumbnail").hasClass('all') ){
                                        jQuery( ".fancybox.thumbnail" ).each(function() {
                                        jQuery(this).attr("data-fancybox-group", "all");        
                                    });
                                }
                            }
                });
        });
    </script>   

jQuery（函数（）{
jQuery（“.filter”）。单击（函数（）
{
if（！jQuery（this）.hasClass（'all'））{
警报（'这不是全部筛选器！'）；
jQuery（“.fancybox.缩略图”）.each（函数（）{
if（jQuery（this）.attr（'data-fancybox-group'））{
jQuery（this.attr（“数据fancybox组”）；
}
});
}
否则{
//警报（'这是所有分配的筛选器！'）；
if（！jQuery（“.fancybox.缩略图”）.hasClass（'all'））{
jQuery（“.fancybox.缩略图”）.each（函数（）{
jQuery（this.attr（“数据fancybox组”、“所有”）；
});
}
}
});
});

您可以通过本机访问DOM元素的数据集成员。您可以使用

delete

关键字删除特定元素。e、 g

$（函数（）{
$（'.click'）。单击（函数（）{
删除document.getElementById（'my-div'）.dataset.sample；
});
});

我的部门
单击我

jQuery（函数（）{
jQuery（“.filter”）。单击（函数（）
{
if（！jQuery（this）.hasClass（'all'））{
警报（'这不是全部筛选器！'）；
jQuery（“.fancybox.缩略图”）.each（函数（）{
if（jQuery（this）.attr（'data-fancybox-group'））{
jQuery（this.attr（“数据fancybox组”）；
}
});
}
否则{
//警报（'这是所有分配的筛选器！'）；
if（！jQuery（“.fancybox.缩略图”）.hasClass（'all'））{
jQuery（“.fancybox.缩略图”）.each（函数（）{
jQuery（this.attr（“数据fancybox组”、“所有”）；
});
}
}
});
});
您可能不需要使用
rel
也不需要删除
数据
属性。实际上，您可以动态更改其值以过滤您的图库。大约一年前，我写了一篇文章（带演示），你可能想看看
<script>
        jQuery(function(){
                jQuery(".filter").click(function()
                {
                        if(!jQuery(this).hasClass('all') ){
                            alert('This is NOT THEALL filter!');
                            jQuery( ".fancybox.thumbnail" ).each(function() {
                                if(jQuery(this).attr('data-fancybox-group')) {

                                    jQuery(this).attr("data-fancybox-group", "");
                                }
                            });

                        }
                        else{
                                //alert('This is the ALL assigned Filter!');
                                if (!jQuery( ".fancybox.thumbnail").hasClass('all') ){
                                        jQuery( ".fancybox.thumbnail" ).each(function() {
                                        jQuery(this).attr("data-fancybox-group", "all");        
                                    });
                                }
                            }
                });
        });
    </script>