jquery double-filter a list of elements depending with their attributes

Question

I have a list of div elements in html and i want to double filter them by hidding the not selected elements and showing only the selected ones using JQuery.

Those are like radio buttons and i can mix them as i want like All-1 , 1-1 , 2-All etc..
filter1: ALL | 1 | 2
filter2: ALL | 1 | 2

For examle here is a html code list:

<div class="list" filter1="1" filter2="1"> 1-1 </div>
<div class="list" filter1="2" filter2="1"> 2-1 </div>
<div class="list" filter1="1" filter2="1"> 1-1 </div>
<div class="list" filter1="1" filter2="2"> 1-2 </div>
<div class="list" filter1="2" filter2="2"> 2-2 </div>
<div class="list" filter1="1" filter2="1"> 1-1 </div>
<div class="list" filter1="2" filter2="1"> 2-1 </div>
<div class="list" filter1="2" filter2="1"> 2-1 </div>

in jquery i tried this but still not working good.I had to use setTimeout since it was not saving the new filtered variables

var filter1,filter2;
$('.filter input[radio]').click(function(){ //filter1,filter2 has both in common classname 'filter'
   setTimeout(function(){
      toFilter1=$('.filter1 input[radio]:checked').val();
      toFilter2=$('.filter2 input[radio]:checked').val();

      $('.list:not([filter1="'+toFilter1+'"])').hide();
      $('.list[filter2="'+toFilter2+'"]').show();

   },100);
});

Thanks in advance

Answer 1

Ok, plnkr created, if this is what you want. Plnkr Link

Thanks..

Answer 2

Anyway i found a simple solutions:

Used a global variable

var filter = [1, 1, 1, "1"];

When hashchanged

if (menu == 'cars') { // #cars_[1,1,0,"1"]
    filter = JSON.parse(hash.split('_')[1]);
    _carlist_filter();
    $('img.car-logo').removeClass('icon-active');
    $('img.car-logo[hash="' + filter[3] + '"]').addClass('icon-active');
    $('body,html').scroll();
}

The function to trigger to filter the list when hash was changed

function _carlist_filter() {
    var clicked = filter[2];
    var a = {
        0: {
            1: '1',
            2: '[gear="automatic"]',
            3: '[gear="manual"]'
        },
        1: {
            1: '1',
            2: '[fuel="diesel"]',
            3: '[fuel="gasoline"]'
        }
    };
    var mcars = $('.car');
    var mfinal;
    mcars.hide();
    var First = (clicked == 0 ? 1 : 0); //always filter secondly the one that has been clicked
    if (a[First][filter[First]] == '1') {
        mcars.show();
    } else {
        mcars.filter(a[First][filter[First]]).show();
    }
    if (a[clicked][filter[clicked]] !== '1') {
        mfinal = $('.car:visible').filter(a[clicked][filter[clicked]]);
        mcars.hide();
        mfinal.show();
    }
    if (filter[3] !== '1') {
        $('.car:not([cartype="' + filter[3] + '"])').hide();
    }

    $('body,html').scroll();
    $('span.cars-filtered strong').html($('.car:visible').length);
}