同位素过滤不适用于锚标记
Isotope filtering not working on anchor tag
我正在创建一个作品集网站来展示我的作品。我正在使用 Light Gallery 在我的网站上显示图像和视频。我想使用 Isotope.js
添加过滤选项
我无法弄清楚我的代码有什么问题。
我在 CodePen
上设置了一支笔
欢迎码字补充
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.nlg1').isotope({
itemSelector: '.revGallery-anchor',
layoutMode: 'fitRows'
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
谢谢
检查您的浏览器控制台。 $lg is not defined
- 如果您删除该代码,似乎工作正常。 http://codepen.io/anon/pen/apmBEd
我正在创建一个作品集网站来展示我的作品。我正在使用 Light Gallery 在我的网站上显示图像和视频。我想使用 Isotope.js
添加过滤选项我无法弄清楚我的代码有什么问题。 我在 CodePen
上设置了一支笔欢迎码字补充
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.nlg1').isotope({
itemSelector: '.revGallery-anchor',
layoutMode: 'fitRows'
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
谢谢
检查您的浏览器控制台。 $lg is not defined
- 如果您删除该代码,似乎工作正常。 http://codepen.io/anon/pen/apmBEd