Я пытаюсь выбрать несколько фильтров и показать результаты как таковые. Затем, когда они нажимают показать все, он удаляет все фильтры. Я использую плагин 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');
}
});
Я заметил, что у вас есть два события щелчка на тех же объектах. $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;
});
Других решений пока нет …