jquery根据它们的属性对元素列表进行双重过滤

Question

我有一个html元素div列表，我想通过隐藏未选定的元素并仅显示使用JQuery选定的元素来对它们进行双重过滤。

这些都是像单选按钮和我要像所有-1，我可以将它们混合，1-1，2-所有等。
filter1: ALL | 1 | 2
filter2: ALL | 1 | 2

对于examle这里是一个HTML代码清单：

<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> 

jQuery中我试过，但仍然没有工作good.I不得不使用setTimeout的，因为它不保存新的过滤变量

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); 
}); 

预先感谢

Answer 1

无论如何，我发现了一个简单的解决方案：

使用的全局变量

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

当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(); 
} 

功能触发筛选名单时，散列值被改变

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); 
} 

Answer 2

好吧，plnkr创建的，如果这是你想要的。 Plnkr Link

谢谢..