Несколько фильтров на изотоп JQuery - PullRequest
Новая
       9

Несколько фильтров на изотоп JQuery

0 голосов
/ 25 мая 2018

Я пытаюсь выбрать несколько фильтров и показать результаты как таковые.Затем, когда они нажимают показать все, он удаляет все фильтры.Я использую плагин jquery isotope.

см. Здесь: 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');
    }
});

1 Ответ

0 голосов
/ 26 мая 2018

Я заметил, что у вас есть два события щелчка на тех же объектах.$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;
});
...