4

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

在这个问题中可以找到我所说的最好的例子之一。

在示例中，他们尝试按类排序，例如将所有元素与类分组，.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而不是类。但是，这只是按字母顺序对所有数据进行排序，而不是按实际类别。

一些可能的解决方案：

  1. 使用 JSON 返回所有类别的数组，然后使用它循环类
  2. <script>使用内联 javascript 并在标签内运行 PHP 循环
  3. 编写带有 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：

我发现这个问题似乎与我正在尝试做的事情有关，但不幸的是，最近的 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在我的循环中使用作为类名。

4

1 回答 1

3

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

  • 您拥有上述格式的数据：

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

  • 您想对slug名称进行排序，即使我们不知道这些蛞蝓会提前命名。

假设这两件事，您链接到的小提琴很接近，但由于我已修复的闭包而出现问题。

正如预期的那样，您的情况与列出的情况类似，只是您需要先获取 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);
    });
});
于 2013-04-11T05:14:17.790 回答