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

Question

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

Answer 1

可以通过本机HTMLelement.dataset property访问DOM元素的dataset成员。可以使用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>

​

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