Lọc bằng các hộp kiểm bằng cách sử dụng jQuery

Question

Tôi muốn lọc một số nội dung bằng các hộp kiểm.

Tôi đã cố gắng thực hiện điều đó nhờ vào số earlier post mà tôi đã đơn giản hóa một chút tại đây DEMO.

Vấn đề của tôi là mỗi mục nội dung có thể có nhiều danh mục được đính kèm. Khi tôi chọn danh mục A và loại B và sau đó bỏ chọn danh mục B, mục nội dung có cả hai danh mục được đính kèm sẽ bị xóa.

Dự án tôi đang thực hiện sẽ chứa nhiều hơn hai danh mục. Một mục nội dung có thể có nhiều loại gắn

HTML:

<ul id="filters"> 
    <li> 
     <input type="checkbox" value="categorya" id="filter-categorya" /> 
     <label for="filter-categorya">Category A</label> 
    </li> 
    <li> 
     <input type="checkbox" value="categoryb" id="filter-categoryb" /> 
     <label for="filter-categoryb">Category B</label> 
    </li> 
</ul> 

<div class="categorya categoryb">A, B</div> 
<div class="categorya">A</div> 
<div class="categorya">A</div> 
<div class="categorya">A</div> 
<div class="categoryb">B</div> 
<div class="categoryb">B</div> 
<div class="categoryb">B</div> 

Javascript:

$('input').click(function() { 
    var category = $(this).val(); 

    if (!$(this).attr('checked')) $('.' + category).hide(); 
    else $('.' + category).show(); 

}); 

Answer 1

Tôi nghĩ rằng hai cách tiếp cận đơn giản nhất sẽ là vào bấm vào bất kỳ hộp kiểm lọc hoặc:

1. Ẩn tất cả<div> yếu tố, sau đó lặp qua các hộp kiểm và cho mỗi checked một .show() các <div> các phần tử có danh mục được liên kết.

2. Vòng qua tất cả các hộp kiểm để thực hiện một danh sách các lớp học để được hiển thị, sau đó lặp qua các <div> yếu tố, kiểm tra mỗi một để xem nếu nó có một trong những lớp học và .hide() hoặc .show() cho phù hợp.

Có một số bộ chọn chung mà bạn có thể sử dụng để nhận tất cả các yếu tố <div> không? Họ có một yếu tố container cụ thể, giống như cách tất cả các hộp kiểm là hậu duệ của "#filters"?

// Solution 1 

$("#filters :checkbox").click(function() { 
    $("div").hide(); 
    $("#filters :checkbox:checked").each(function() { 
     $("." + $(this).val()).show(); 
    }); 
}); 

Demo: http://jsfiddle.net/6wYzw/41/

// Solution 2 

$("#filters :checkbox").click(function() { 

    var re = new RegExp($("#filters :checkbox:checked").map(function() { 
          return this.value; 
         }).get().join("|")); 
    $("div").each(function() { 
     var $this = $(this); 
     $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"](); 
    }); 
}); 

Demo: http://jsfiddle.net/6wYzw/42/

Tôi đoán cách thứ nhất là ngắn hơn, và dễ dàng hơn để duy trì ...

Answer 2

http://jsfiddle.net/FfZsC/

$('input').click(function() { 
    var category = $(this).val(); 

    $('.' + category).each(function() { 
     var anyChecked = false; 
     var classArray = this.className.split(/\s+/); 

     for(idx in classArray) 
     { 
      if ($('#filter-' + classArray[idx]).is(":checked")) 
      { 
       anyChecked = true; 
       break; 
      } 
     } 

     if (! anyChecked) $(this).hide(); 
     else $(this).show(); 

    }); 

}); 

Về cơ bản, tôi kiểm tra từng loại hộp gắn liền với những mặt hàng liên quan đến bộ lọc hiện được nhấp . Nếu một trong số chúng vẫn được kiểm tra, thì mục đó sẽ được hiển thị; nếu không, nó sẽ bị ẩn.

Answer 3

Khi họ click vào một hộp kiểm xây dựng công cụ chọn như sau:

var selector = $('input:checkbox').map(function(){ 
    return this.checked ? '.' + this.id : ''; 
}).get().join(''); 

Điều này sẽ tạo bộ chọn như categoryb.categoryc (bộ chọn css AND css). Sau đó, bạn có thể ẩn tất cả và hiển thị những người đáp ứng công cụ chọn.

$('div[class^="category"]') 
    .hide() 
    .filter(selector) 
    .show(); 

Hãy thử nó ra trên jsbin

Mã làm việc:

$('input').click(function() { 
    var selector = $('input:checkbox').map(function(){ 
     return this.checked ? '.' + this.id : ''; 
    }).get().join(''); 
    console.log(selector); 

    var all = $('div[class^="category"]'); 
    if(selector.length) 
     all.hide().filter(selector).show() 
    else all.show(); 
}); 

Answer 4

tôi muốn thêm hình ảnh động jquery để hiển thị và lẩn trốn. Các giải pháp trên đã không cho phép điều này (lần đầu tiên ẩn tất cả mọi thứ, sau đó hiển thị) hoặc là cồng kềnh với các biểu thức thông thường. Giải pháp của tôi, dựa trên trên, là như sau:

var showselector = $('input:checkbox').map(function(){ 
     return this.checked ? '.' + this.id : null; 
    }).get().join(','); 
var hideselector = (showselector) ? ':not(' + showselector + ')' : '*'; 

$("div").filter(showselector).slideDown(1500); 
$("div").filter(hideselector).slideUp(1500); 

Answer 5

@Josiah Ruddell - mã không chạy trong IE9

tôi thêm "window.console & &" vào ... console .log ... để chạy correytly trong IE9