我正在使用 jQuery 插件 MixItUp对我拥有的内容列表进行一些过滤。
该插件提供了一个开箱即用的多重过滤器,但问题是它显示了所有内容,然后当您单击其中一个过滤器时,它会将其从列表中删除,而我希望这样当您选择一个过滤器时的过滤器,它只显示那一个。如果您单击另一个,它也会显示该内容。 There's a demo它有与我想要的类似的东西,但它比我需要的更复杂 - 它有两个过滤器类别,我只需要一个。
在演示中,他们不使用“multiFilter”选项。相反,他们似乎为“过滤器”选项定义了字符串,然后根据单击的过滤器将其吐出。我确实尝试解构他们所做的事情并按照我想要的方式重新设计它,但未能真正取得任何成果。
基本上我迷路了,所以希望有人以前玩过这个插件。我只想朝正确的方向踢一脚。我是否需要编写自定义点击函数并忘记使用 multiFilter,尝试设置过滤字符串,或者可以自定义默认的 multiFilter 吗?
There's a fiddle here with the plugin js added and the default multiFilter functionality
HTML
<div id="filter">
<span>Filter</span>
<ul class="filter-list">
<li data-filter="all" class="filter active"><a href="#">All</a></li>
<li data-filter="lemon" class="filter"><a href="#">Lemon</a></li>
<li data-filter="orange" class="filter"><a href="#">Orange</a></li>
<li data-filter="apple" class="filter"><a href="#">Apple</a></li>
</ul>
</div>
<ul id="grid">
<li class="mix lemon">
<h3>Lemon</h3>
<p>Some text here</p>
</li>
<li class="mix orange">
<h3>Orange</h3>
<p>Some text here</p>
</li>
<li class="mix apple">
<h3>Apple</h3>
<p>Some text here</p>
</li>
</ul>
JS
$('#grid').mixitup({
multiFilter: 'true',
showOnLoad: 'lemon orange apple'
});
最佳答案
我最终浏览了 National Parks demo 中的脚本。并调整它直到我得到我想要的。
我的脚本最终是这样的,以防其他人想要这个。
$(function () {
// INSTANTIATE MIXITUP
$('#grid').mixitup({
effects: ['fade', 'blur']
});
// HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING
var $filters = $('#filters').find('li');
var filterString = 'all';
// Bind checkbox click handlers:
$filters.on('click', function () {
var $t = $(this),
filter = $t.attr('data-filter');
if (filter == 'all') {
// If "all"
if (!$t.hasClass('active')) {
// if unchecked, check "all" and uncheck all other active filters
$t.addClass('active').siblings().removeClass('active');
// Replace entire string with "all"
filterString = 'all';
}
} else {
// Else, uncheck "all"
$t.siblings('[data-filter="all"]').removeClass('active');
// Remove "all" from string
filterString = filterString.replace('all', '');
if (!$t.hasClass('active')) {
// Check checkbox
$t.addClass('active');
// Append filter to string
filterString = filterString == '' ? filter : filterString + ' ' + filter;
} else {
// Uncheck
$t.removeClass('active');
// Remove filter and preceeding space from string with RegEx
var re = new RegExp('(\\s|^)' + filter);
filterString = filterString.replace(re, '');
};
};
// Reset to all if none are active
if ($filters.filter('.active').size() == 0) {
$filters.filter('[data-filter="all"]').addClass('active');
filterString = 'all';
}
$('#grid').mixitup('filter', [filterString])
});
});
关于jquery - 如何使用 'mixitup'插件自定义多重过滤?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16952642/