Question

我正在尝试添加一个可过滤的＆＃34;画廊＆＃34;到使用fancybox的WordPress网站。使用rel和data-fancybox-group对元素进行分组。 data属性优先于rel组。有没有办法删除data-fancybox-group数据属性，除了＆＃34; all＆＃34;单击过滤器。如果单击所有过滤器，则data-fancybox-group =＆＃34; all＆＃34;如果不存在，应该添加。

<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元素的数据集成员。您可以使用delete关键字删除特定元素。 e.g。

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

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

2 个答案: