使用jQuery为fancybox2删除和添加数据属性答案

【问题标题】：Using jQuery to Remove and Add Data Attribute for fancybox2使用jQuery为fancybox2删除和添加数据属性
【发布时间】：2015-03-05 06:37:47
【问题描述】：

我正在尝试使用 fancybox 向 WordPress 网站添加一个可过滤的“图库”。元素使用 rel 和 data-fancybox-group 进行分组。 data 属性优先于 rel 组。当单击“全部”过滤器以外的任何其他过滤器时，有没有办法删除 data-fancybox-group 数据属性。如果点击all过滤器，如果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>

【问题讨论】：

您可能不需要使用rel，也不需要删除data 属性。您实际上可以动态更改其值以过滤您的画廊。我在一年前写了一篇文章（带演示），所以你可能想阅读picssel.com/…

标签： javascript php jquery wordpress fancybox-2

【解决方案1】：

您可以通过本机 HTMLelement.dataset property 访问 DOM 元素的数据集成员。您可以使用delete 关键字来删除特定元素。例如

$(function(){
  $('.click').click(function(){
    delete document.getElementById('my-div').dataset.sample;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='my-div' data-sample='Hello, world!'>My div</div>
<a class='click'>Click me</a>

【讨论】：

【解决方案2】：

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

【讨论】：