如何爲jQuery中的項目列表創建過濾器？

我有車的名單，像這樣的：（簡化當然）如何爲jQuery中的項目列表創建過濾器？

<div class="car" data-image="true" data-specs="true"> 
    1. BMW 
</div> 
<div class="car" data-image="false" data-specs="true"> 
    2. Mercedes 
</div> 
<div class="car" data-image="true" data-specs="false"> 
    3. Audi 
</div> 
<div class="car" data-image="false" data-specs="false"> 
    4. Jaguar 
</div>

我要的是複選框，將過濾汽車的列表。

With image <input name="with_image" type="checkbox" /> 
With specs <input name="with_specs" type="checkbox" />

如果兩個複選框都打勾，我想只顯示第一輛車，其他車輛隱藏。

問題是，如果我只是hide()和show()他們當複選框被選中或取消選中，它不會知道其他複選框是否被選中。例如，如果我選擇了兩個複選框，則只顯示第一輛汽車，但是如果我取消選中第一輛汽車，即使沒有圖像，也會顯示第四輛汽車。

我該如何克服這一點？

來源

2013-07-20 cgf

完全動態的，可以通過添加更多的汽車或複選框可以擴展任何方式：

$('input[type="checkbox"]').on('change', function() { 
    var checks = $.map($('input[type="checkbox"]:checked'), function(el) { 
     return el.name.replace('with_',''); 
    }); 

    $('.car').each(function(_,el) { 
     var h = 0; 
     for (var i=0; i<checks.length; i++) { 
      if (!!$(el).data(checks[i])) h++; 
     } 
     $(el).toggle(h===checks.length); 
    }); 
});

FIDDLE

來源

2013-07-20 20:39:50 adeneo

您可以在每次選中複選框時運行相同的功能，即獲取所有複選框並應用您的過濾器。給他們上課。

$(".checkbox:checked").each(function(){ 
    //probably start with a helper function to show all 
    //then hide the ones you want to hide. 
});

來源

2013-07-20 20:32:53 Seano666

$(':checkbox').change(function(){ 

    // hide all 
    $('.car').hide(); 

    // show with image when image checkbox is checked 
    if($('[name=with_image]').is(':checked')) 
    $('[data-image=true]').show(); 

    // show with specs when specs checkbox is checked 
    if($('[name=with_specs]').is(':checked')) 
    $('[data-specs=true]').show(); 
})

閃爍可能是令人不安的，我想改善這一點。

來源

2013-07-20 20:36:28 juanpastas

將處理程序綁定到複選框上的更改事件，以便每次切換方框時都可以修改可見汽車。然後，隱藏所有汽車，並顯示符合過濾標準的相關部件。

$("input[type='checkbox']").change(function() { 
    $cars = $("div.car").hide(); 
    if (this.name == "with_image" && $(this).is(":checked")) { 
     $cars.filter("[data-image='true']").show(); 
    } 
    if (this.name == "with_specs" && $(this).is(":checked")) { 
     $cars.filter("[data-specs='true']").show(); 
    } 
});

來源

2013-07-20 20:37:51 nbrooks

如何爲jQuery中的項目列表創建過濾器？

回答

相關問題