jQuery同位素上的多個過濾器

Question

我試圖能夠選擇多個過濾器，並使結果顯示為這樣。 然后，當他們單擊全部顯示時，它將刪除所有過濾器。 我正在使用jquery同位素插件。

看到這里： https : //convention.test.yja.org/sessions

我希望某人能夠選擇年齡組和類別（可能也有多個年齡組和多個類別）

這是過濾器代碼：

 <ul class="filter list-inline">
    <li><a class="active" href="#" data-filter="*">Show All</a></li>
    <li><a href="#" data-filter=".Education"><i class="fa fa-book" style="color:#bbbbbb"></i> Jain Education</a></li>
    <li><a href="#" data-filter=".Lifestyle"><i class="fa fa-hand-holding-heart" style="color:#bbbbbb"></i> Lifestyle</a></li>
    <li><a href="#" data-filter=".Career"><i class="fa fa-briefcase" style="color:#bbbbbb"></i> Career & Networking</a></li>
    <li><a href="#" data-filter=".DiversityInclusion"><i class="fa fa-globe" style="color:#bbbbbb"></i> Diversity & Inclusion</a></li>
    <li><a href="#" data-filter=".SocialIssues"><i class="fa fa-handshake" style="color:#bbbbbb"></i> Current Events & Social Issues</a></li>
</ul>
<ul class="filter list-inline">
    <li><a class="active" href="#" data-filter="*">Show All</a></li>
    <li><a href="#" data-filter=".HS">High School</a></li>
    <li><a href="#" data-filter=".College">College</a></li>
    <li><a href="#" data-filter=".JNF">JNF</a></li>
</ul> 

這是同位素js代碼：

/*-------------------------------------------------*/
/* =  portfolio isotope
/*-------------------------------------------------*/

var winDow = $(window);
// Needed variables
var $container = $('.iso-call');
var $filter = $('.filter');

try {
    $container.imagesLoaded(function () {
        $container.trigger('resize');
        $container.isotope({
            filter: '*',
            layoutMode: 'masonry',
            animationOptions: {
                duration: 750,
                easing: 'linear'
            }
        });

        $('.triggerAnimation').waypoint(function () {
            var animation = $(this).attr('data-animate');
            $(this).css('opacity', '');
            $(this).addClass("animated " + animation);

        },
                {
                    offset: '75%',
                    triggerOnce: true
                }
        );
        setTimeout(1500);
    });
} catch (err) {
}

winDow.bind('resize', function () {
    var selector = $filter.find('a.active').attr('data-filter');

    try {
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
    } catch (err) {
    }
    return false;
});

// Isotope Filter 
$filter.find('a').click(function () {
    var selector = $(this).attr('data-filter');

    try {
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
    } catch (err) {

    }
    return false;
});


var filterItemA = $('.filter li a');

filterItemA.on('click', function () {
    var $this = $(this);
    if (!$this.hasClass('active')) {
        filterItemA.removeClass('active');
        $this.addClass('active');
    }
});

Answer 1

我注意到，您在同一對象上有兩個單擊事件。 $filter.find('a').click(和filterItemA.on('click',

第一個很辛苦，第二個只是確保隨時都只有一個按鈕被點擊。

您應該將第二個更改為

• 僅當您單擊“ Show All按鈕之一時，才刪除活動標志，
• 單擊其他任何選項時，禁用“ Show All -s”

和拳頭一

• 根據filterItemA.filter(".active")組成選擇器

 filterItemA.off('click') filterItemA.map( (x,i) => { if( $(i).attr('data-filter')=="*") { $(i).addClass("showall") } else { $(i).addClass("noshowall") } }) filterItemA.on('click', function () { var $this = $(this); var selector = $this.attr('data-filter'); var filterActive; var activeSelector; if (!$this.hasClass('active')) { if (selector=="*") { filterItemA.filter(".noshowall").removeClass('active') filterItemA.filter(".showall").addClass('active') } else { filterItemA.filter(".showall").removeClass('active') $this.addClass('active') } } else { if (selector=="*") { // select show all... what to do here? } else { $this.removeClass('active') filterActive=filterItemA.filter(".noshowall.active") activeSelector = Array.join(filterActive.map( (x,i) => $(i).attr("data-filter")),'') if (activeSelector== "") { filterItemA.filter(".showall").addClass("active") } } } filterActive=filterItemA.filter(".noshowall.active") activeSelector = Array.join(filterActive.map( (x,i) => $(i).attr("data-filter")),'') if (activeSelector== "") { activeSelector="*"; } try { $container.isotope({ filter: activeSelector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); } catch (err) { } return false; });