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

问题描述

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

I've been working with the Isotope plugin for jQuery, and I've run into some problems with our homepage which requires two isotope instances.

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

Both of them have different types of items and they are kept in their own containers, but when I click a filter on the second instance of isotope it attempts to filter the first instance too and not vice-versa.

我要问的是，是否可能在一个页面上有两个同位素实例，而它们之间不会互相干扰；如果是，那么最好的方法是什么而不会出现问题?

What I'm asking is if it is possible to have two instances of isotope on a page without them interfering with eachother and if so, what would be the best way to get this done without problems?

推荐答案

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

To answer your question, yes it is possible to run two different filters on two instances of isotope. I've created an example fiddle for you to demonstrate.

小提琴

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

Did some code styling and jslint stuff

这里有一些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-同一页面上的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！