问题
I have a page using isotope filter plugin. The filter is triggered by checkbox. The filtering works, and the filter count works. I want to print what filter is applied and also be able to "uncheck" the filter checkbox if I click the printed filter value. The $filterdisplay is working, but its a string seperated by commas. I want to split the string into clickable divs that would unfilter the filter selected.
I tried splitting the array into divs but it caused the printed value to fire more than once. If c0 is checked and then after c1 is checked it would show:
<div>c0</div><div>c0</div><div>c1</div>
This example is pretty close to what I want except its not using checkboxes: http://everyonelovessharing.com/misc/isotopedemo/
$(function(){
var $container = $('#grid'),
$checkboxes = $('#filters input');
var $filterCount = $('.filter-count');
var iso = $container.data('isotope');
var $filterDisplay = $('#filter-display');
$checkboxes.change(function(){
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
filters.push( this.value);
});
// ['.red', '.blue'] -> '.red, .blue'
filters = filters.join(', ');
$container.isotope({ filter: filters });
updateFilterCount();
// this made the checkboxes show up multiple times in the display
// filters.split(', ').map(function(opt) {
// $("<div>").text(opt).appendTo( $filterDisplay );
// });
$filterDisplay.text( filters );
});
function updateFilterCount() {
$filterCount.text( iso.filteredItems.length + ' webinars match selected filters.' );
}
updateFilterCount();
//Reset btn
$(".filter-reset").click(function () {
$container.isotope({
filter: '*'
});
updateFilterCount();
$('#filters input:checkbox').prop('checked', false);
$filterDisplay.text( '' );
filters = {};
console.log(filters);
});
});
</script>
来源:https://stackoverflow.com/questions/55943895/isotope-combination-filter-display-i-want-to-split-the-text-array-into-divs