Fran Brennan Fran Brennan - 1 month ago 19
Javascript Question

Isotope Filter According To Checkbox State

If any of you good folk could cast an eye over this and let me know the error of my ways, that would be fab, cheers!

I'm using isotope to filter items. Each item has the option for users to 'favourite' them.

I can successfully toggle a checkbox and save its current state to localStorage but what I'd like to be able to do is have one of the filter buttons work so it filters (via isotope) any items that have been 'favourited'.

Here are the filter buttons, which all work fine except for the 'favourites'.

HTML

<div id="filters" class="button-group">
<button class="button uppercase is-checked" data-filter="*">All</button>
<button class="button uppercase" data-filter=".amber">AMBER</button>
<button class="button uppercase" data-filter=".dark">DARK</button>
<button class="button uppercase" data-filter=".golden">GOLDEN</button>
<button class="button uppercase" data-filter=".ruby">RUBY</button>

<button class="button uppercase" id="checkbox" data-filter=".checkbox">FAVOURITES</button>
</div>


And here's the script that I'm trying to make work.

JS

function customCheckbox(){
var checkBox = $('.checkbox');

//on load select if necessary
checkBox.each(function(){
var id=$(this).data('id');
if(localStorage.getItem(id)==1){
$(this).addClass("selected");
}
});

//on click toggle selected and save in localstorage
checkBox.click(function(){
var id=$(this).data('id');
$(this).toggleClass("selected");
if($(this).hasClass("selected")){
localStorage.setItem(id,1);
}else{
localStorage.removeItem(id);
}
});
}


$(document).ready(function (){
//start checkboxes here
customCheckbox();

//filter button
var $grid = $('#grid');
$grid.isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
transitionDuration: '0.6s'
});

$('#filters').on( 'click', 'button', function() {
$('.checkbox:not(.selected)').parent().show();
$grid.isotope(); //show all not starred blocks
});

$('#checkbox').on( 'click', 'button', function(){

$('.checkbox:not(.selected)').parent().hide();
$grid.isotope(); //hide all not starred blocks

});


If anyone can shed any light on where I'm going wrong, it'd be hugely appreciated! Many thanks, in advance, for any help or advice.

UPDATE: I've now created a jsfiddle. I'm new to jsfiddle; so do shout up if I've done it wrong.

https://jsfiddle.net/Frannie/rtkpws48/55/

For some reason I can't seem to get the (previously successful) localStorage toggle state of the favourite checkbox to work properly in the fiddle. No idea where I've gone astray???

Anyway, if anyone has any clues as to how to get any of it to work, that would be brilliant!

Answer
  1. When the page loaded, in each checkbox which is localstorage add the class .checkbox to the parent div as

    $(this).closest(".element-item").addClass("checkbox");

  2. Then when you click favorite, add the class .checkbox to parent and when unfavorite remove the class .checkbox from the parent.

see: https://jsfiddle.net/tamilcselvan/rtkpws48/56/

Try

checkBox.each(function() {
        var id = $(this).data('id');
        if (localStorage.getItem(id) == 1) {
            $(this).addClass("selected");

            // add the class checkbox to the parent div
            $(this).closest(".element-item").addClass("checkbox");
        }
    });

    //on click toggle selected and save in localstorage
    checkBox.click(function() {
        var id = $(this).data('id');
        $(this).toggleClass("selected");
        if ($(this).hasClass("selected")) {
            localStorage.setItem(id, 1);

            // add the class checkbox to the parent div
            $(this).closest(".element-item").addClass("checkbox");
        } else {
            localStorage.removeItem(id);
            // remove the class checkbox in parent div
            $(this).closest(".element-item").removeClass("checkbox");
        }
    });

*Edit: *

$('#filters').on('click', 'button', function() {
    buttonFilter = $(this).attr('data-filter');
    var filterValue = $(this).attr('data-filter');
    console.log(filterValue);
    $grid.isotope();
    // if filter value is all (*) then
    // empty the search field value
    // and manually trigger keyup
    if( filterValue == '*' ) {
        $('#quicksearch').val('');
        $('#quicksearch').trigger('keyup');
        $grid.isotope();
    }

});