作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在使用 jQuery 的同位素插件,我的主页遇到了一些问题,它需要两个同位素实例。
它们都有不同类型的元素,并且保存在自己的容器中,但是当我单击第二个同位素实例上的过滤器时,它也会尝试过滤第一个实例,并且不 -反之亦然。
我要问的是,是否可以在一个页面上有两个同位素实例而不互相干扰,如果可以,那么没有问题地完成此操作的最佳方法是什么?
最佳答案
为了回答您的问题,是的,可以对两个同位素实例运行两个不同的过滤器。我创建了一个示例 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/
我是一名优秀的程序员,十分优秀!