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

2023年11月17日 253次阅读

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

它们都有不同类型的物品,并且它们保存在自己的容器中,但是当我点击同位素的第二个实例上的过滤器时,它也会尝试过滤第一个实例,反之亦然.

我要问的是,如果有可能在页面上有两个同位素实例而不会相互干扰,如果是这样的话,那么最好的方法是什么才能完成？

最佳答案 要回答你的问题,是的,可以在两个同位素实例上运行两个不同的过滤器.我为你演示了一个示例小提琴.

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