解决方案

Question

我在Wordpress帖子中按类别使用同位素过滤器。帖子通常是过滤类别的子项，因此它们的类在类的名称中包含父类别的名称，但不等于此名称。例如，过滤器是Facebook，Twitter，Youtube。类名是facebook-pages或twitter-infographics。因此，除非检查父类别，否则不会过滤这些帖子。我现在使用的代码如下（jQuery非冲突模式）：

var $jcontainer = $j('#portfolio-list');
$jcontainer.imagesLoaded( function() {
// initialize isotope
$jcontainer.isotope({
  filter: '*',
  itemSelector : '.post',
  layoutMode : 'masonry',
});
});

$j('#portfolio-filter a').click(function(){
    $j('#portfolio-filter .current').removeClass('current');
    $j(this).addClass('current');

    var selector = $j(this).attr('data-filter');
    $jcontainer.isotope({
        filter: selector,
     });
     return false;
});

我想知道如何通过课程的部分内容来使其工作。谢谢你的帮助。

解决方案

经过一番研究，我找到了解决方案。我意识到我可以使用 .match 函数在过滤之前检查类，然后分配一个类＆＃34; .match＆＃34;到每个匹配的元素。然后只是按这个类过滤！）这是代码。希望它会对某人有所帮助！

// cache container
var $jcontainer = $j('#portfolio-list');
$jcontainer.imagesLoaded( function() {
// initialize isotope
$jcontainer.isotope({
  filter: '*',
  itemSelector : '.post',
  layoutMode : 'masonry',
});
});

$j('#portfolio-filter a').click(function(){
    $j('#portfolio-filter .current').removeClass('current');
    $j('#portfolio-list .match').removeClass('match');
    $j(this).addClass('current');
    var selector = $j(this).attr('data-filter');
    $j('#portfolio-list article' ).each(function() {
       if ($j(this).attr('class').match(new RegExp(selector))) {
        $j(this).addClass('match');
    }
    }); 

    $jcontainer.isotope({
        filter: '.match',
     });
     return false;
});

Answer 1

<强>解决方案

经过一番研究，我找到了解决方案。我意识到我可以使用.match函数在过滤之前检查类，然后为每个匹配的元素分配一个类“.match”。然后只是按这个类过滤！）这是代码。希望它会对某人有所帮助！

// cache container
var $jcontainer = $j('#portfolio-list');
$jcontainer.imagesLoaded( function() {
// initialize isotope
$jcontainer.isotope({
  filter: '*',
  itemSelector : '.post',
  layoutMode : 'masonry',
});
});

$j('#portfolio-filter a').click(function(){
    $j('#portfolio-filter .current').removeClass('current');
    $j('#portfolio-list .match').removeClass('match');
    $j(this).addClass('current');
    var selector = $j(this).attr('data-filter');
    $j('#portfolio-list article' ).each(function() {
       if ($j(this).attr('class').match(new RegExp(selector))) {
        $j(this).addClass('match');
    }
    }); 

    $jcontainer.isotope({
        filter: '.match',
     });
     return false;
});

通过元素类的开头过滤同位素

解决方案

1 个答案: