jQuery 和 Isotope 按元素内的数字排序

Question

我在尝试弄清楚如何进行特定类型的排序时遇到了麻烦，通常我会按类 ID 进行排序，但这次我试图实现不同的目标。

好的，这是示例代码:

<div class="points-wrapper">

<span class="rewards-points">
        <span data-bind="text: $data.Points">1000</span> Points
</span>

<span class="rewards-points">
        <span data-bind="text: $data.Points">5000</span> Points
</span>

<span class="rewards-points">
        <span data-bind="text: $data.Points">5000</span> Points
</span>

</div>

下面的排序按钮。

<div id="sorts" class="button-group">
  <button class="button is-checked" data-sort-value="original-order">original order</button>
  <button class="button" data-sort-value="points">500</button>
  <button class="button" data-sort-value="points">1000</button>
  <button class="button" data-sort-value="points">2000</button>
  <button class="button" data-sort-value="points">3000</button>
  <button class="button" data-sort-value="points">5000</button>
</div>  

这是我实际正在研究的一个较小的示例，真实的示例有大约 30 个不同的项目，所有项目都有不同的点数。

我试图弄清楚如何根据跨度内的点数进行排序。选项类似于“0 - 1000”、“1000 - 5000”、“5000 - “10000”等。

如何使用 jQuery 和 Isotope.js 对其进行排序？

Answer 1

* 排序 *

所以我假设 rewards-points 类是您的同位素项目，因此:

var container = $('#container').isotope({
itemSelector: '.rewards-points',  
  layoutMode: 'masonry',
    getSortData: {
        points: function(item){
            return parseFloat($(item).find(".number").text());
        }
    }
});

container.isotope({ sortBy: 'points' });

getSortData 函数返回 Isotope 排序依据的值，然后将 sortBy 设置为我们在 getSortData 函数中设置的名称.

详细信息请参见:http://isotope.metafizzy.co/sorting.html

* 通过过滤进行排序 *

您需要使用过滤功能，如下所示:

$(".button").click(function(e) {
    if($(this).text() == "All"){
        container.isotope({ filter: function() { return true; } });
    }
    else
    {
        var btnVal = parseFloat($(this).text());
        container.isotope({ filter: function() {
            var itemVal = parseFloat($(this).find(".number").text());
            return btnVal == itemVal;
        }});
    }

});

参见:http://isotope.metafizzy.co/filtering.html

我认为应该对其进行排序...但我想说，如果您可以更改标记，请使用 data 属性来保存值，并使用类来保存选择器，这样它就可以工作使用同位素更容易!

在这里更新 fiddle :http://jsfiddle.net/Y59S2/3/

同样，整理 HTML 会让事情变得更加容易，所以需要考虑一些事情。