无法使Quicksand.js工作

Question

我正在尝试使用quicksand.js过滤数据集合。然而，我在数据的显示上遇到了问题。我已经能让数据消失了。但是，它不会再出现了。我创建了一个jsfiddle，它是可用的这里。基本上，我的JavaScript看起来是这样的：

var $content = $('#stage');
var $data = $content.clone();

function filterData(tag) {
  var data = [];
  if (tag === null) {
    data = $data.find('li');
  } else {
    data = $data.find('li[data-tags=' + tag + ']');
  }

  console.log(data);
  $content.quicksand(data, {
    duration: 800,
    easing: 'easeInOutQuad'
  });
  return false;
}

在我看来一切都是正确的。我不知道我做错了什么。

Answer 1

首先，你的小提琴坏了。首先，将quicksand 1.3与它不支持的最近的jquery版本连接起来。第二，在不链接easeInOutQuad的情况下调用jquery.easing.1.3.js。第三，您有范围问题，filterData函数不是全局定义的。

但是，您真正的问题是文档中的这一行：

attribute – attribute containing unique value able to identify same item within source and destination collection, default: 'data-id'

您的“阶段”数据li没有一个具有此属性，因此不能正确地过滤它们。加上它，一切似乎都奏效了：

<ul id="stage">
  <li data-tags="A" data-id="1">Item A-1</li>
  <li data-tags="A" data-id="2">Item A-2</li>

  <li data-tags="B" data-id="3">Item B-1</li>
  <li data-tags="B" data-id="4">Item B-2</li>
</ul>

更新的小提琴。