Jquery多選框過濾

Question

我有三組複選框，它們允許我根據數據屬性過濾多個div。這很好，但不是我需要的。

如果您訪問下面的jsfiddle，您將看到一個工作測試。

我需要做的是：

1. 當不止一個選項是同一類別內選擇例如'小'和'中等'，它應該增加結果，即顯示所有'小'和'中等'結果（這是它現在所做的）。

2. 當在不同類別中選擇了多個選項時，例如「中」和「北美」就應減少的結果即顯示所有「中」花「北美

我將如何去修復/修改我的代碼，使這項工作嗎？ （我希望這是有道理的）。

下面是我使用jQuery：

  $('.flowers-wrap, .continents-wrap').delegate('input[type=checkbox]', 'change', function() { 
       var $lis = $('.flowers > div'), 
        $checked = $('input:checked'); 
       if ($checked.length) {       
        var selector = ''; 
        $($checked).each(function(index, element){ 
         if(selector === '') { 
          selector += "[data-category~='" + element.id + "']";     
         } else { 
          selector += ",[data-category~='" + element.id + "']"; 
         } 
        });       
        $lis.hide(); 
        console.log(selector); 
        $('.flowers > div').filter(selector).show();    
       } else { 
        $lis.show(); 
       } 
      }); 

請參閱的jsfiddle我所建立的證明我有這個問題 - http://jsfiddle.net/n3EmN/

Answer 1

非常感謝Pho3nixHun他的幫助:)

這是我自己的答案：（jsfiddle here）。

$(document).ready(function() { 

    var byProperty = [], byColor = [], byLocation = []; 

    $("input[name=fl-colour]").on("change", function() { 
     if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']"); 
     else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']"); 
    }); 

    $("input[name=fl-size]").on("change", function() { 
     if (this.checked) byColor.push("[data-category~='" + $(this).attr("value") + "']"); 
     else removeA(byColor, "[data-category~='" + $(this).attr("value") + "']"); 
    }); 

    $("input[name=fl-cont]").on("change", function() { 
     if (this.checked) byLocation.push("[data-category~='" + $(this).attr("value") + "']"); 
     else removeA(byLocation, "[data-category~='" + $(this).attr("value") + "']"); 
    }); 

    $("input").on("change", function() { 
     var str = "Include items \n"; 
     var selector = '', cselector = '', nselector = ''; 

     var $lis = $('.flowers > div'), 
      $checked = $('input:checked'); 

     if ($checked.length) { 

      if (byProperty.length) {   
       if (str == "Include items \n") { 
        str += " " + "with (" + byProperty.join(',') + ")\n";    
        $($('input[name=fl-colour]:checked')).each(function(index, byProperty){ 
         if(selector === '') { 
          selector += "[data-category~='" + byProperty.id + "']";      
         } else { 
          selector += ",[data-category~='" + byProperty.id + "']";  
         }     
        });     
       } else { 
        str += " AND " + "with (" + byProperty.join(' OR ') + ")\n";     
        $($('input[name=fl-size]:checked')).each(function(index, byProperty){ 
         selector += "[data-category~='" + byProperty.id + "']"; 
        }); 
       }       
      } 

      if (byColor.length) {      
       if (str == "Include items \n") { 
        str += " " + "with (" + byColor.join(' OR ') + ")\n";     
        $($('input[name=fl-size]:checked')).each(function(index, byColor){ 
         if(selector === '') { 
          selector += "[data-category~='" + byColor.id + "']";      
         } else { 
          selector += ",[data-category~='" + byColor.id + "']"; 
         }     
        });     
       } else { 
        str += " AND " + "with (" + byColor.join(' OR ') + ")\n";    
        $($('input[name=fl-size]:checked')).each(function(index, byColor){ 
         if(cselector === '') { 
          cselector += "[data-category~='" + byColor.id + "']";     
         } else { 
          cselector += ",[data-category~='" + byColor.id + "']"; 
         }     
        }); 
       }   
      } 

      if (byLocation.length) {    
       if (str == "Include items \n") { 
        str += " " + "with (" + byLocation.join(' OR ') + ")\n";     
        $($('input[name=fl-cont]:checked')).each(function(index, byLocation){ 
         if(selector === '') { 
          selector += "[data-category~='" + byLocation.id + "']";      
         } else { 
          selector += ",[data-category~='" + byLocation.id + "']";  
         }     
        });    
       } else { 
        str += " AND " + "with (" + byLocation.join(' OR ') + ")\n";     
        $($('input[name=fl-cont]:checked')).each(function(index, byLocation){ 
         if(nselector === '') { 
          nselector += "[data-category~='" + byLocation.id + "']";      
         } else { 
          nselector += ",[data-category~='" + byLocation.id + "']"; 
         } 
        }); 
       }    
      } 

      $lis.hide(); 
      console.log(selector); 
      console.log(cselector); 
      console.log(nselector); 

      if (cselector === '' && nselector === '') {   
       $('.flowers > div').filter(selector).show(); 
      } else if (cselector === '') { 
       $('.flowers > div').filter(selector).filter(nselector).show(); 
      } else if (nselector === '') { 
       $('.flowers > div').filter(selector).filter(cselector).show(); 
      } else { 
       $('.flowers > div').filter(selector).filter(cselector).filter(nselector).show(); 
      } 

     } else { 
      $lis.show(); 
     } 

     $("#result").html(str); 

    }); 

    function removeA(arr) { 
     var what, a = arguments, L = a.length, ax; 
     while (L > 1 && arr.length) { 
      what = a[--L]; 
      while ((ax= arr.indexOf(what)) !== -1) { 
       arr.splice(ax, 1); 
      } 
     } 
     return arr; 
    } 

}); 

Answer 2

您應隱藏元素，你篩選之前並向他們展示之後，在.filter(selector)之前添加一個.hide()。像這樣：

$('.flowers > div').hide().filter(selector).show(); 

這應該隱藏所有的元素，然後顯示選定的元素。

DEMO