jQuery Isotope - 同一页面上的多个实例

Question

我一直在使用 jQuery 的同位素插件，但我的主页遇到了一些问题，需要两个同位素实例。

它们都有不同类型的项目，它们都保存在自己的容器中，但是当我单击第二个同位素实例上的过滤器时，它也会尝试过滤第一个实例，而 不是 反之- 反之亦然。

我要问的是，是否有可能在一个页面上有两个同位素实例而不会相互干扰，如果可以，那么在没有问题的情况下完成这项工作的最佳方法是什么？

Answer 1

要回答您的问题，是的，可以对两个同位素实例运行两个不同的过滤器。我已经创建了一个示例小提琴供您演示。

Fiddle

编辑：做了一些代码样式和 jslint 的东西

这里有一些js：

$(function () {
    "use strict";

    //Define your containers and option sets
    var $container = [$('#container'), $('#container-new')], $optionSets = [$('#options .option-set'), $('#options-new .option-set')];

    //Initialize isotope on each container
    jQuery.each($container, function (j) {
        this.isotope({
            itemSelector : '.element'
        });
    });

    //Initialize filter links for each option set
    jQuery.each($optionSets, function (index, object) {

        var $optionLinks = object.find('a');

        $optionLinks.click(function () {
            var $this = $(this), $optionSet = $this.parents('.option-set'), options = {},
                key = $optionSet.attr('data-option-key'),
                value = $this.attr('data-option-value');
            // don't proceed if already selected
            if ($this.hasClass('selected')) {
                return false;
            }

            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');

            // make option object dynamically, i.e. { filter: '.my-filter-class' }

            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[key] = value;
            if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
              // changes in layout modes need extra logic
                changeLayoutMode($this, options);
            } else {
              // otherwise, apply new options

                $container[index].isotope(options);
            }

            return false;
        });
    });
});