MULTY過濾器與轉換頁面 - 同位素及流沙JS問題

Question

：

我想創建一個多過濾器（注編輯，因爲我剛剛意識到這個問題在某種程度上相關的，在我的腦海裏，至少！）頁面中的結果將是動畫... 我想用2個不同的插件（流沙和同位素），並與兩個解決方案我有問題...

--- ISOTOPE ---（original ）

與同位素我需要過濾基於活動類的數據，或基於過濾器的ID，我已經存儲在JS中，有誰知道如何ca ñ我這樣做？

我用'顏色'（紅色，藍色，橙色...）和'類型'（正方形，圓形...）設置了一個頁面，其中包含兩個不同的過濾器： 我已經有一個Javascript類，如果選擇了所有顏色，則選擇2個過濾器，將「活動」類別轉換爲「全部」，並且可以激活多個子過濾器。這也保存了一個字符串中的活動li項目的顏色過濾器和另一個字符串的形狀過濾器的列表

我也已經設置了頁面，如組合過濾器同位素演示在此鏈接：http://isotope.metafizzy.co/demos/combination-filters.html它工作正常，但不允許同時選擇多個子過濾器。

我在這個鏈接http://fiddle.jshell.net/desandro/JB45z/上看到了帶有過濾組合的演示，但它基於我希望避免的單選按鈕。

我不知道如果我想要做的事很容易或不是...就像，如何告訴同位素基於具有活動類的子過濾器或基於ID與ID保存在我的兩個字符串？

感謝您的幫助，因爲您可以很容易地理解我並不擅長js，英語不是我的第一語言！

---流沙---（編輯）

我剛剛意識到，我沒有解釋爲什麼我存儲在JS字符串所選項目的ID。這也是關於不同的JS問題。

我試圖用流沙而不是同位素來設置相同的系統。

但由於流沙需要啓動li和目標li才能顯示動畫，因此我設置了js將數組傳遞到使用該數組顯示目標li的不同臨時php頁面。

所有直到這裏工作正常，但我無法取回原始頁面中的li數據讓Quicksand執行動畫。我的js的最後一部分似乎有一個我不能夠解決（太多天都沒有成功嘗試）問題，JS的最後部分是：

$.post('destination_li_filtered.php', { 
colorString, 
shapeString, 
$('#ids').attr('val') 
}, 
function(data) { // should contains the resulting data from the request (?) 
$('.list').quicksand($(data).find('li'), 
{ adjustHeight: 'auto' }, 
function() { 
callbackCode(); 
} 
); 
e.preventDefault(); 
}); 

外部頁面目的地儷過濾正在顯示結果，但原始頁面無法取回數據...

顯然，我需要設置頁面同位素或流沙，而不是兩個。

但我也想知道女巫是最好的插件來顯示100個結果與約20個過濾器（不考慮組合）。當然，哪個最容易使用！

Answer 1

您應該將單選按鈕和視圖中的更改視爲單獨的東西。

這是一種常見的誤解，您應該將所有狀態存儲在DOM中（即，選中哪個複選框）。 DOM是視圖，您不保留視圖中的狀態。

您應該擁有一個生活在JavaScript中的狀態。

像：

var state = "all_selected"; // green, red, blue 

然後，當你檢查單選按鈕，它會設置相應的狀態和更新列表（基於狀態顯示/隱藏元素）。

這可以讓你做任何你想要的控制，無論是單選按鈕，複選框還是完全自定義的東西。