jQuery Isotope – 同一页面上的多个实例
我一直在使用jQuery的Isotope插件，我遇到了一些问题，我们的主页需要两个同位素实例。
它们都有不同类型的物品，并且它们保存在自己的容器中，但是当我点击第二个同位素实例上的filter时，它也会尝试过滤第一个实例，反之亦然。
我要问的是，是否有可能在页面上有两个同位素实例而不会相互干扰，如果是这样，那么最好的方法是什么才能完成？
要回答你的问题，是的，可以在两个同位素实例上运行两个不同的filter。 我已经创建了一个示例小提琴，供您演示。
小提琴
编辑：做了一些代码样式和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, ie { 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; }); }); });