I am currently in the process of creating a highly sortable and filterable image gallery that utilizes numerous tags. The inspiration for this project stems from a similar question on Stack Overflow regarding dropdown menus and checkboxes. You can view the original question here where I was able to resolve most of my issues.
Update: I have taken the code from the aforementioned question and expanded upon it further. You can check out the enhanced version here if you're interested in exploring it.
However, I believe there is still room for improvement and wanted to turn it into a little Debugging Game. I have encountered some challenges with the dropdown menus not working ideally in conjunction with the checkboxes.
Here's the link to my project on CodePen: https://codepen.io/manujarvinen/pen/QWvEogb
And here's an image showcasing the project: https://i.sstatic.net/h7Lyv.png
var $filterCheckboxes = $('input[type="checkbox"]');
var $filtermenues = $('.grid1');
filterfuncAnother = function () {
var selectedFilters = [];
$filtermenues.find(":selected").each(function () {
debugger
var v = this.value;
if (selectedFilters.indexOf(v) === -1 && v)
selectedFilters.push(v);
});
$('.animal' && '.filterDiv')
.hide()
.filter(
function (_, a) {
var itemCat = $(a).data('category').split(' ');
if (itemCat.indexOf("showAll") > -1)
return;
return selectedFilters.every(
function (c) {
return itemCat.indexOf(c) > -1;
})
})
.show();
}
var filterFunc = function () {
var selectedFilters = [];
debugger
$filterCheckboxes.filter(':checked').each(function () {
var v = this.value;
if (selectedFilters.indexOf(v) === -1)
selectedFilters.push(v);
});
$('.animal' && '.filterDiv')
.hide()
.filter(
function (_, a) {
var itemCat = $(a).data('category').split(' ');
return selectedFilters.every(
function (c) {
return itemCat.indexOf(c) > -1;
})
})
.show();
}
$filterCheckboxes.on('change', filterFunc);
$('select').on('change', filterfuncAnother);body {
width: 100%;
text-align: center;
background-color:...
<!-- Based upon this URL: https://stackoverflow.com/q/68315184/4383420 -->
<!-- Help needed in this URL: https://stackoverflow.com/q/68317206/4383420 -->
...