jQuery – Remember variables values without using globals

Good morning,
I’m building a huge site with tons of contents. I decided, for an easier navigation, to implement an isotope-based filter, with multi categories options. I explain:

All the material that has to be filtered, is stored in a block like

<div class="box CAT1-VALUE CAT2-VALUE CAT3-VALUE">

so I can easly filter it with isotope. My radio buttons output all CAT1, CAT2 and CAT3 values, and they return a value of “.CATX-VALUE”

My js is something like this

$('.filters').on( 'click', 'input', function() {

    var filterValue = this.value;       

    $grid.isotope({ filter:  filterValue });

The problem is that once clicked again in a second radio block, obviously old filter is deleted, preventing multi-filters! Is there a way, without using globals variables to store filter values, in order to filter “CAT1-VALUE and CAT2-VALUE”?

Thank you very much for any help!

Source: jquery

Leave a Reply