javascript - 无法让 Quicksand.js 工作

Question

我正在尝试使用 quicksand.js 过滤数据集合。但是，我在显示数据时遇到问题。我已经能够让数据消失。然而，它不会再次出现。我创建了一个jsfiddle，可用here 。基本上，我的 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

首先，你的 fiddle 坏了。一、链接 quicksand 1.3 并将其与它不支持的最新 jquery 版本配对。第二，调用 easeInOutQuad 而不链接 jquery.easing.1.3.js。第三，您存在范围问题，filterData 函数未全局定义。

不过，您真正的问题是文档中的这一行:

attribute – 包含唯一值的属性，能够识别源集合和目标集合中的相同项目，默认值:'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>

已更新fiddle .