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

Question

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

它们都有不同类型的物品，它们都保存在自己的容器里，但当我点击第二个同位素实例的过滤器时，它也尝试过滤第一个实例，而而不是，反之亦然。

我想问的是，是否有可能在一页上有两个同位素实例而不相互干扰，如果是的话，那么最好的方法是在没有问题的情况下做到这一点？

Answer 1

要回答你的问题，有可能在两个同位素的例子上运行两个不同的过滤器。我创造了一个示范小提琴给你演示。

小提琴

编辑:做了一些代码样式和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;
        });
    });
});