0

（注意：编辑因为我刚刚意识到这个问题在某种程度上是相关的，至少在我看来！）

我想创建一个多过滤器页面，其中的结果将被动画化......我正在尝试使用 2 个不同的插件（quicksand 和 Isotope），并且两种解决方案都有问题......

---ISOTOPE---（原创）

使用 Isotope，我需要根据活动类或过滤器的 ID 过滤数据，我已经存储在 JS 中，有人知道我该怎么做吗？

我设置了一个页面，其中包含 2 个不同的过滤器，例如“颜色”（红色、蓝色、橙色...）和“类型”（方形、圆形...）在选择时，如果选择了所有颜色，则将“活动”类转换为“全部”，并且可以激活多个子过滤器。这也将活动 li 项目的 id 列表保存在一个用于颜色过滤器的字符串和另一个用于形状过滤器的字符串中

我也已经在此链接上设置了类似于组合过滤器同位素演示的页面：http: //isotope.metafizzy.co/demos/combination-filters.html它工作正常但不允许选择多个子-同时过滤。

我在此链接http://fiddle.jshell.net/desandro/JB45z/上看到了带有过滤组合的演示，但它基于我想避免的单选按钮。

我不确定我想要做的事情是否容易......就像，如何告诉同位素根据具有活动类的子过滤器或基于 li 的总和进行过滤ID保存在我的两个字符串中？

感谢您的帮助，因为您可以轻松理解我根本不擅长 js，而且英语不是我的第一语言！

--- QUICKSAND ---（已编辑）

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

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

但是由于流沙需要有一个起始 li 和一个目标 li 来显示动画，所以我设置了 js 以将一个数组传递给一个不同的临时 php 页面，该页面使用该数组来显示一个目标 li。

直到这里一切正常，但我无法取回原始页面中的 li 数据以让流沙执行动画。我的 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(); 
});

外部页面destination-li-filtered 正在显示结果，但原始页面无法取回数据...

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

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

4

1 回答 1

0

您应该将单选按钮和视图更改视为单独的事物。

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

你的 JavaScript 中应该有一个状态。

喜欢：

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

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

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

于 2013-02-01T16:21:59.640 回答