Question

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

这些就像单选按钮一样，我可以把它们混合起来，就像我想要的全-1,1-1,2-全等等 filter1: ALL | 1 | 2
filter2: ALL | 1 | 2

例如，这里是一个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中我试过这个但仍然不能正常工作。我不得不使用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

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

谢谢..

Answer 2

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

使用全局变量

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

反汇编时

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

jquery根据其属性双重过滤元素列表

2 个答案: