2

这是我迄今为止工作的 JSFiddle：http: //jsfiddle.net/FmBFt/1/我的问题是调整演示代码来做我想做的事。Isotope 文档对像我这样的新手编码员没有多大帮助。

解释我需要什么

我正在使用ISOTOPE并有 6 个类别。每个类别中都有任意数量的框。所以丁香类可能有 3 个框，绿色类可能有 8 个框，依此类推。我有每个类别的链接列表。单击类别名称时（例如：丁香类别），我需要所有带有顶部丁香边框的框按其类名“l”排序并移至顶部。然后，我希望按照添加日期的顺序对这些丁香框进行排序，最近的框首先显示。我希望将排序功能应用于所有类别，但真的不知道如何去做。

我注意到您可以按“日期类别”进行排序，但所做的只是将所有类别组合在一起，它不会像我需要的那样将某个类别移到顶部。

我不知道如何调整http://jsfiddle.net/FmBFt/1/来做我想做的事，有人能帮帮我吗？

编辑：嗯，到目前为止，我有一个答案让我很困惑，但我很确定我的问题在于我的 JS 中的 getSortData 函数：

    getSortData : {
      blogs : function( $elem ) {
        return $elem.find('.blogs');
      },
      symbol : function( $elem ) {
        return $elem.attr('data-symbol');
      },
      category : function( $elem ) {
        return $elem.attr('data-category');
      },
      number : function( $elem ) {
        return parseInt( $elem.find('.number').text(), 10 );
      },
      weight : function( $elem ) {
        return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
      },
      name : function ( $elem ) {
        return $elem.find('.name').text();
      }
    }

上面代码中的类别调用看起来可以做到，但我只需要找出如何调整，目前它所做的只是将每个类别组合在一起，但我需要一次组合一个......有人吗？

4

2 回答 2

1

在寻找这个确切问题的解决方案时，我正在查看其他答案。就我而言，按游戏标题的平台排序。他获得了令人难以置信的技术和深度，我可以看到你是如何迷路的。

这是我使用的 getSortData 中的一个元素：

flash : function ( $elem ) {
    if ($elem.find('.platform').text() == "Flash") {
        return $elem.find('.modes').text();
    } else {
        return "Z";
    }
}

我在这里所做的是检查您将返回的值是否是我想要的，即。“闪光”。如果是，它会返回完美的结果。你也可以给它 0 的值。然后，如果它有任何其他值，你返回一个比你想要的值“更多”的值。

所以在我的情况下，我的第一个值是 Flash，然后所有其他值都设置为 Z。如果你愿意，你甚至可以进行多次检查。“if elseif elseif”以便将多个事物排序到顶部。

希望这可以帮助。

于 2012-11-09T21:28:16.997 回答
-1

这里涉及两个不同的部分。首先，我们有排序本身。这是由同位素处理的，与您无关。你需要的是第二部分：一个比较器。

比较器是您定义的函数，它返回各种“键”。isotope 将比较所有键并以自然方式对其进行排序（文本按 ascii: 排序'1', '10', '100', '11', '2'），数字按值排序（1, 2, 10, 11, 100）。

就是这样getSortData()做的：它返回几个同位素可以用来创建密钥的函数。排序时，您必须指定要使用的功能。如果您指定foo，则 isotope 将要求getSortData().foo(x)对每个节点进行排序，其中x替换为每个节点。

创建此键列表后，同位素将对键进行排序（并使用此信息对节点本身进行排序）。

所以你需要一个好的密钥生成器。我的建议是将日期转换为毫秒，将该数字转换为字符串，然后用 0 填充。请参阅左填充的答案：如何用前导零填充值？

如果类为 'l' 或 '0'，则在此字符串前面加上 '1'，否则：

return (cls == 'l' ? '0' : '1') + zeroFill( dateInMillis, 16 );

这将首先对具有正确类的框进行排序（“0”小于“1”），然后按日期对每种类型的框进行排序。

或者，您可以为每个具有错误类的框提供相同的键（这样它们就不会更改顺序）：

return (cls == 'l' ? zeroFill( dateInMillis, 16 ) : 'xxx');
于 2012-03-12T11:46:52.987 回答