Question

我正在尝试使用Isotope.js按类型对数据进行排序。似乎有几种方法可以做到这一点，但它们都要求您事先知道排序变量。

我所谈论的最好的例子之一可以在this question找到。

在示例中，他们尝试按类排序，例如将所有具有类.milk的元素分组，如下所示：

milk: function( $elem ) {
    var isMilk = $elem.hasClass('milk');
    return (!isMilk?' ':'');
},

这里提供了一个jsfiddle：http://jsfiddle.net/Yvk9q/9/

我的问题：

我从用户生成的数据库中提取类别（类或数据类型）。出于这个原因，我不能简单地将所有排序变量添加到代码中。

我在小提琴中玩了一个半工作的排序：http://jsfiddle.net/BandonRandon/erfXH/1/使用data-category而不是类。但是，这只是按字母顺序排序所有数据，而不是按实际类别排序。

一些可能的解决方案：

使用JSON返回所有类别的数组，然后使用它来循环遍历类
使用内联javascript并在<script>标记
使用javascript标头编写外部PHP文件

我在寻找什么
这里最简单的最佳方法，如果它是上述解决方案之一或不同之处。这似乎不应该是这样复杂的。所以我可能会因此而复杂化。

编辑：

我现在有一个我的数据的json数组但我无法弄清楚当我尝试这样的事情时如何将数据传递到同位素设置

var $container = $('.sort-container');

var opts = {
    itemSelector: '.member-item',
    layoutMode: 'straightDown',
    getSortData : {
        $.getJSON( 'member-cat-json.php', function(data) { 
            $.each(data, function(i, item) {
                var slug = data[i].slug;
                slug : function( $elem ) {
                    var is+slug = $elem.hasClass(slug);
                    return (!is+slug?' ':'');
                    }
                }
            }); 
        });
    }                                       
}

var $container = $('.sort-container');

$container.isotope(opts);

失败是因为我无法在插件设置中使用循环。不知道可以做些什么呢。

编辑2：

我发现this question似乎正在尝试做什么但不幸的是most recent jsfiddle失败了同位素

以下是我的JSON输出示例：

{term_id:9, name:Milk, slug:milk, term_group:0, term_taxonomy_id:17...}
{term_id:9, name:Eggs, slug:eggs, term_group:0, term_taxonomy_id:17...}

我使用slug作为类名并在我的循环中。

Answer 1

我不确定我是否完全理解你的问题，但我会陈述我的假设并从那里开始工作：

您的数据格式如上所述：

{term_id:9, name:Milk, slug:milk, term_group:0, term_taxonomy_id:17...}
您希望对slug名称进行排序，即使我们不知道会提前命名哪些slu ..

假设这两件事情，你联系到的小提琴很接近，但由于封闭I have fixed而出现问题。

正如预期的那样，您的情况与列出的情况类似，只是您需要首先获取JSON数据。

var $container = $('.sort-container'),
    createSortFunction = function(slug) {
        return function($elem) {
            return $elem.hasClass(slug) ? ' ' : '';
        };
    }, 
    getSortData = function(data) {
        var sortMethods = {};

        for (var index in data) {
            var slug = data[index].slug;

            // immediately create the function to avoid
            // closure problems
            sortMethods[slug] = createSortFunction(slug);
        }

        return sortMethods;
    }

$.getJSON('member-cat-json.php', function (data) {
    // I'm wrapping the isotop creation inside the `getJSON`
    // call, just to ensure that we have `data`

    $container.isotope({
        itemSelector: '.member-item',
        layoutMode: 'straightDown',
        getSortData: getSortData(data);
    });
});

使用Isotope对动态数据进行排序

1 个答案: