修改功能同時過濾多個數據屬性

Question

以下功能允許用戶通過data-attributes過濾產品，並且可以同時過濾多個值。它通過創建所選值的數組來完成此操作，並且當單擊任何值（在本例中爲checked/unchecked）時，它將隱藏所有項目，然後重新顯示與更新數組中的值匹配的項目。

它可以在過濾一個data-attribute時正常工作，但是如果組合在過濾多個屬性時不再顯示與任何值匹配的所有結果，而只是顯示匹配所有指定值的結果。

我已經張貼在這裏它說明了一個問題，小提琴：http://jsfiddle.net/chayacooper/WZpMh/94/所有，但其中一個項目既有data-style="V-Neck"和data-color="Black"的價值，因此他們應該如果選擇其中一種過濾器仍然可見，但如果從另一個值一個不同的data-attribute一些項目被隱藏。

$(document).ready(function() { 
    var selected = []; 
    $('#attributes-Colors *').click(function() { 
     var attrColor = $(this).data('color'); 
     var $this = $(this); 
     if ($this.parent().hasClass("active")) { 
      $this.parent().removeClass("active"); 
      selected.splice(selected.indexOf(attrColor),1); 
     } 
     else { 
      $this.parent().addClass("active"); 
      selected.push(attrColor); 
     } 
     $("#content").find("*").hide(); 
     $.each(selected, function(index,item) { 
      $('#content').find('[data-color *="' + item + '"]').show(); 
     }); 
     return false; 
    }); 

$('#attributes-Silhouettes *').click(function() { 
     var attrStyle = $(this).data('style'); 
     var $this = $(this); 
     if ($this.parent().hasClass("active")) { 
      $this.parent().removeClass("active"); 
      selected.splice(selected.indexOf(attrStyle),1); 
     } 
     else { 
      $this.parent().addClass("active"); 
      selected.push(attrStyle); 
     }   
     $("#content").find("*").hide(); 
     $.each(selected, function(index,item) { 
      $('#content').find('[data-style *="' + item + '"]').show(); 
     }); 
     return false; 
    }); 
}); 

Answer 1

您的處理程序的兩個正在更新selected陣列，但只有一個處理器上執行click。第一個，如果顏色是（德）選擇，第二個如果風格。假設您點擊了「黑色」和「圓領」。那時候你選擇的數組看起來像這樣：[ "Black", "Crew_Neck" ]。下次您做出選擇時，假設您單擊「短袖」，第二個（樣式）處理程序將執行。以下是發生了什麼：

1. Short_Sleeves被添加到所選陣列。
2. 所有項目都隱藏使用$("#content").find("*").hide();
3. 選中的數組將被迭代，並且項目會再次基於動態選擇器顯示。

3號是問題所在。在上面的例子中，一個樣式被點擊，所以樣式處理程序正在執行。選定陣列中任何顏色的項目都會失敗，例如，使用選擇器（例如$('#content').find('[data-style *="Black"]').show();）將找不到任何元素。

我會建議2件事情。

1. 保留2個選擇陣列，一個用於顏色，一個用於樣式。
2. 將您的代碼組合起來，以便爲這兩個組只使用一個處理程序。

這裏是一個（大部分）工作example。

請注意，我在您的.filterOptions容器中添加了一個data-type="color|style"，以允許組合使用單個處理程序並仍然知道哪個組已更改。

以下是完整的腳本：

$(document).ready(function() { 
    // use 2 arrays so the combined handler uses correct group 
    var selected = { color: [], style: [] }; 

    // code was similar enough to combine to 1 handler for both groups 
    $('.filterOptions').on("click", "a", function (e) { 
     // figure out which group... 
     var type = $(e.delegateTarget).data("type"); 
     var $this = $(this); 
     // ...and the value of the checkbox checked 
     var attrValue = $this.data(type); 

     // same as before but using 'type' to access the correct array 
     if ($this.parent().hasClass("active")) { 
      $this.parent().removeClass("active"); 
      selected[type].splice(selected[type].indexOf(attrValue),1); 
     } 
     else { 
      $this.parent().addClass("active"); 
      selected[type].push(attrValue); 
     } 

     // also showing all again if no more boxes are checked 
     if (attrValue == 'All' || $(".active", ".filterOptions").length == 0) { 
      $('#content').find('*').show(); 
     } 
     else { 
      // hide 'em all 
      $("#content").find("*").hide(); 
      // go through both style and color arrays 
      for (var key in selected) { 
       // and show any that have been checked 
       $.each(selected[key], function(index,item) { 
        $('#content').find('[data-' + key + ' *="' + item + '"]').show(); 
       }); 
      } 
     } 
    }); 
}); 

UPDATE：從意見

合併建議，使與複選框，而不是鏈接的處理工作是一個小改動，事件綁定代碼。它現在使用change方法，而不是click並監聽:checkbox元素，而不是a：

$('.filterOptions').on("change", ":checkbox", function (e) { 
    // handler code 
}); 

「所有」選項「打嗝」是有點難以修復比我想象的那樣。這是我結束了：

// get a jQuery object with all the options the user selected 
var checked = $(":checked", ".filterOptions"); 

// show all of the available options if... 
if (checked.length == 0 // ...no boxes are checked 
    || // ...or... 
    checked.filter(".all").length > 0) // ...at least one "All" box is checked... 
{ 
    // remainder of code, including else block, unchanged 
} 

我還添加了一個all類適當checkbox元素來簡化上述條件。

Updated Fiddle