【问题标题】:Isotope filtering not working on anchor tag同位素过滤不适用于锚标签
【发布时间】:2017-01-15 17:26:25
【问题描述】:

我正在创建一个作品集网站来展示我的作品。我正在使用 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');
  });
});

谢谢

【问题讨论】:

    标签: jquery html css jquery-isotope lightgallery


    【解决方案1】:

    检查您的浏览器控制台。 $lg is not defined - 如果您删除任何代码,似乎工作正常。 http://codepen.io/anon/pen/apmBEd

    【讨论】:

    • 嗨 Micheal,我已经在 codepen 以及我的项目中进行了这些更改。但它在我的项目中不起作用。应该添加任何其他内容。论坛里有人告诉我有关 imageloaded.js 的事。我应该使用它吗
    • @Kamalakannan 当我在 codepen 中进行过滤时,过滤正在工作。你是说它在codepen中不起作用?会发生什么?
    • @Kamalakannan 好的...不知道该告诉你什么,因为我看不到你的代码。
    • 好的..我将主持一个预览并链接它。请帮帮我。
    • 嘿,迈克尔。我想通了。这是代码的位置。我不得不把这段代码放在最后。有效。感谢您的帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-19
    • 2021-02-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多