Javascript 带过渡的多重过滤器页面-同位素和；流沙问题

（注意：编辑，因为我刚刚意识到这个问题在某种程度上是相互关联的，至少在我的头脑中是如此！）

我想创建一个多过滤器页面，其中的结果将动画。。。 我正在尝试使用两个不同的插件（流沙和同位素），两种解决方案都有问题

---同位素---（原件）

有了同位素，我需要根据活动类过滤数据，或者根据过滤器ID过滤数据，我已经存储在JS中了，有人知道我该怎么做吗

我用两种不同的过滤器设置了一个页面，比如“颜色”（红色、蓝色、橙色…）和“类型”（方形、圆形…） 我已经有一个Javascript，它根据选择将类活动分配给2个过滤lu，如果选择了所有颜色，则将“活动”类移动到“全部”，并且可以激活多个子过滤器。这还将活动li项的id列表保存在一个字符串中，用于颜色过滤器，另一个字符串用于形状过滤器

我也已经在这个链接上设置了类似组合过滤器同位素演示的页面：它工作正常，但不允许同时选择多个子过滤器

我在这个链接上看到了带有过滤组合的演示，但它是基于单选按钮的，我想避免使用

我不确定我想做的是容易还是不容易。。。比如，如何告诉同位素根据具有活动类的子过滤器进行过滤，或者根据保存在我的两个字符串中的ID的li的总和进行过滤

谢谢你的帮助，因为你很容易理解我对js一点也不熟练，英语不是我的第一语言

---流沙---（编辑）

我刚刚意识到我没有解释为什么我将所选项目的ID存储在js字符串中。这也是关于不同的js问题

我试图用流沙而不是同位素来建立同样的系统

但是因为quicksand需要一个起始li和一个目标li来显示动画，所以我设置js将数组传递给另一个临时php页面，该页面使用数组来显示目标li

在这里之前一切都正常，但我无法恢复原始页面中的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(); 
}); 

外部页面目标正在显示结果，但原始页面无法收回数据

显然，我需要在页面上设置同位素或流沙，而不是两者

---

但我也想知道witch是用大约20个过滤器（不考虑组合）显示100个结果的最佳插件。当然，这是最容易使用的

您应该将单选按钮和视图中的更改视为独立的内容

这是一个常见的误解，即您应该将所有状态存储在DOM中（即选中哪个复选框）。DOM是一个视图，在视图中不保留状态

您应该在JavaScript中有一个状态

比如：

然后，当您选中单选按钮时，它将设置适当的状态并更新列表（基于状态显示/隐藏元素）

---

这使您可以进行任何想要的控制，无论是单选按钮、复选框还是完全定制的控件。

嗨，弗里茨，非常感谢您的回答！但我得请你澄清一下。。。我现在已经在Javascript中存储了2个字符串，在每个字符串中我都有我需要使用的过滤器ID的值（基于用户选择），我可以在脚本中直接使用它吗？或者我需要首先将其从ID转换为相应的数据筛选值？对不起，我现在才理解您的意思。。。所以我需要写一些类似的东西：#1对于所有类处于活动状态的'li a'项，获取类并放入一个字符串colorClassString（相同的w/TypeClassString）或#1a对于ID与我存储在字符串中的ID对应的'li a'，给我类并放入一个colorClassString（相同的w/TypeClassString）#2做一些操作，只获取我需要的类（因为如果我在color:all和type:square上设置了活动过滤器，并且我将所有类放在一起，它将再次显示所有项目，对吗？#3将结果字符串放在对同位素的调用中，对吗？抱歉，我花了很多时间来理解该做什么和如何做，而且我已经花了很多时间在这方面了！知道吗（或者更好，是时候告诉我了；-）如何用js写？

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