无法让Quicksand.js工作

Unable to get Quicksand.js working

本文关键字：js 工作 Quicksand      更新时间：2023-09-26

我正在尝试使用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;
}
在我看来一切都是正确的。我不知道我做错了什么。

首先，你的小提琴坏了。第一，链接quicksand 1.3并将其与不支持的最新jquery版本配对。第二，在不连接jquery.easing.1.3.js的情况下呼出easeInOutQuad。第三，您有作用域问题，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>

更新小提琴。

相关文章：