Question

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

它们都有不同类型的物品，它们保存在自己的容器中，但当我点击第二个同位素实例上的过滤器时，它会尝试过滤第一个实例并且不副-versa。

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

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;
        });
    });
});

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

1 个答案: