Несколько jQuery Filtizr на одной странице

Question

Я новичок в jQuery. Я использую jquery filterizr для одной страницы. У меня есть две отдельные галереи. И я хочу использовать filterizr на них отдельно. Я дал идентификатор div моей галереи, используя приведенный ниже код,

$('#galleryID').filterizr();

Но этот код работает только для одной галереи. Вторая галерея не имеет никакого эффекта. Если я попытаюсь выполнить фильтрацию со вторым идентификатором галереи одновременно, это показывает ошибку ниже,

jquery.filterizr.js:814 Uncaught TypeError: Cannot read property 'length' of undefined
at n.fn.init._getArrayOfUniqueItems (jquery.filterizr.js:814)
at n.fn.init._handleFiltering (jquery.filterizr.js:707)
at n.fn.init.filter (jquery.filterizr.js:193)
at HTMLDivElement.<anonymous> (jquery.filterizr.js:520)
at HTMLDivElement.dispatch (jquery-2.1.1.js:3)
at HTMLDivElement.r.handle (jquery-2.1.1.js:3)
at Object.trigger (jquery-2.1.1.js:3)
at HTMLDivElement.<anonymous> (jquery-2.1.1.js:3)
at Function.each (jquery-2.1.1.js:2)
at n.fn.init.each (jquery-2.1.1.js:2)

Таким образом, я не могу использовать filterizr для них обоих одновременно. Это работает только для одного div. Кто-нибудь может мне помочь или дать мне пример того, как я могу использовать этот jQuery.filterizr?

РЕДАКТИРОВАТЬ: я пытался с другим ID, а также пытался с классом. Но если я использую класс, то две галереи работают как одна сущность. Значит, фильтрация не работает отдельно.

Answer 1

Поскольку вы выбираете с помощью ID, который уникален и не может использоваться дважды.

ID Selector ("#id") Каждое значение идентификатора должно использоваться только один раз в документе. Если более чем одному элементу был присвоен один и тот же идентификатор, запросы, использующие этот идентификатор, будут выбирать только первый соответствующий элемент в DOM. Однако на такое поведение нельзя полагаться; документ с более чем одним элементом, использующим один и тот же идентификатор, недействителен. Документация jQuery

Итак, вам нужно создать класс и выбрать его следующим образом:

$('.your-class').filterizr();

Edit:

Если вам нужно установить несколько фильтров, это немного сложно. Сначала вам нужно передать опцию, чтобы отключить элементы управления по умолчанию при создании экземпляров Filterizrs.

// container class, init first filter
var filer1 = $('.filer-1').filterizr({
    delay: 25,
    setupControls: false // this to disable the default control
});

Затем вам нужно выбрать класс управления навигацией:

// first filter nav
$('#filer-1 li').click(function() {
    // Set Active class
    $('.filters-filer-1 .filtr').removeClass('filtr-active');
    $(this).addClass('filtr-active');
    // Init nav filter
    var filter = $(this).data('fltr');
    filer1.filterizr('filter', filter);
});

Вот кратный пример фильтрации:

// init first filter
var filer1 = $('.filer-1').filterizr({
	delay: 25,
	setupControls: false // this to disable the default control
});

// first filter nav
$('#filer-1 li').click(function() {
$('.filters-filer-1 .filtr').removeClass('filtr-active');
    $(this).addClass('filtr-active');
    var filter = $(this).data('fltr');
    filer1.filterizr('filter', filter);
});

// init second filter
var filer2 = $('.filer-2').filterizr({
	delay: 25,
	setupControls: false // this to disable the default control
});

// second filter section nav
$('#filer-2 li').click(function() {
	$('.filters-filer-2 .filtr').removeClass('filtr-active');
	$(this).addClass('filtr-active');
	var filter = $(this).data('fltr');
	filer2.filterizr('filter', filter);
});

/* Basic css */
.layout-col {
	width: 50%;
	min-height: 100px;
	margin: 30px auto
}
.nav-gallery .filtr-button {
	display: inline-block;
	margin: 0 10px
}

.nav-gallery {
	list-style: none;
	padding: 0
}

.filtr-button {
	cursor: pointer;
}

.filtr-active {
	color: DarkRed;
	font-weight: bold;
}

.layout-pane {
	display: flex;
}

.layout-pane .filtr-item {
	width: 50px;
	height: 50px;
	margin: 10px;
}

.filtr-item.orange {
	background: orange
}

.filtr-item.green {
	background: green
}

.filtr-item.purple {
	background: purple
}

.filtr-item.red {
	background: red
}

.filtr-item.blue {
	background: blue
}

.filtr-item.olive {
	background: olive
}

.layout-pane .item-number {
	text-align: center;
	line-height: 50px;
	color: #fff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/filterizr/1.3.4/jquery.filterizr.min.js"></script>
<div class="layout-col">
	<ul class="nav-gallery filters-filer-1" id="filer-1">
		<li class="filtr-button filtr filtr-active" data-fltr="all">All</li>
		<li class="filtr-button filtr" data-fltr="1">Green</li>
		<li class="filtr-button filtr" data-fltr="2">Orange</li>
		<li class="filtr-button filtr" data-fltr="3">Purple</li>
	</ul>
	<div class="layout-padding-wrapper">
		<div class="layout-pane filer-1">
			<div class="filtr-item orange" data-category="2, 4"><div class="item-number">1</div></div>
			<div class="filtr-item green" data-category="1, 4"><div class="item-number">2</div></div>
			<div class="filtr-item purple" data-category="3"><div class="item-number">3</div></div>
			<div class="filtr-item green" data-category="1, 4"><div class="item-number">4</div></div>
			<div class="filtr-item orange" data-category="2, 4"><div class="item-number">5</div></div>
			<div class="filtr-item purple" data-category="3"><div class="item-number">6</div></div>
			<div class="filtr-item orange" data-category="2, 4"><div class="item-number">7</div></div>
			<div class="filtr-item green" data-category="1, 4"><div class="item-number">8</div></div>
			<div class="filtr-item purple" data-category="3"><div class="item-number">9</div></div>
			<div class="filtr-item purple" data-category="3"><div class="item-number">10</div></div>
			<div class="filtr-item orange" data-category="2, 4"><div class="item-number">11</div></div>
			<div class="filtr-item green" data-category="1, 4"><div class="item-number">12</div></div>
		</div>
	</div>
</div>
<hr>
<div class="layout-col">
	<ul class="nav-gallery filters-filer-2" id="filer-2">
		<li class="filtr-button filtr filtr-active" data-fltr="all">All</li>
		<li class="filtr-button filtr" data-fltr="1">Blue</li>
		<li class="filtr-button filtr" data-fltr="2">Red</li>
		<li class="filtr-button filtr" data-fltr="3">Olive</li>
	</ul>
	<div class="layout-padding-wrapper">
		<div class="layout-pane filer-2">
			<div class="filtr-item red" data-category="2, 4"><div class="item-number">1</div></div>
			<div class="filtr-item blue" data-category="1, 4"><div class="item-number">2</div></div>
			<div class="filtr-item olive" data-category="3"><div class="item-number">3</div></div>
			<div class="filtr-item blue" data-category="1, 4"><div class="item-number">4</div></div>
			<div class="filtr-item red" data-category="2, 4"><div class="item-number">5</div></div>
			<div class="filtr-item olive" data-category="3"><div class="item-number">6</div></div>
			<div class="filtr-item red" data-category="2, 4"><div class="item-number">7</div></div>
			<div class="filtr-item blue" data-category="1, 4"><div class="item-number">8</div></div>
			<div class="filtr-item olive" data-category="3"><div class="item-number">9</div></div>
			<div class="filtr-item olive" data-category="3"><div class="item-number">10</div></div>
			<div class="filtr-item red" data-category="2, 4"><div class="item-number">11</div></div>
			<div class="filtr-item blue" data-category="1, 4"><div class="item-number">12</div></div>
		</div>
	</div>
</div>