gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 22:51:25 26 4
gpt4 key购买 nike

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

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

我要问的是,是否可以在一个页面上有两个同位素实例而不互相干扰,如果可以,那么没有问题地完成此操作的最佳方法是什么?

最佳答案

为了回答您的问题,是的,可以对两个同位素实例运行两个不同的过滤器。我创建了一个示例 fiddle 供您演示。

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

关于jQuery Isotope - 同一页面上的多个实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17815116/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com