Вопрос

Я использую фильтр изотопа по категориям для сообщений WordPress.Часто посты являются детьми отфильтрованных категорий, поэтому их классы содержат имя категории родителей во имя класса, но не равна этому имени.Например, фильтры являются Facebook, Twitter, YouTube.И название класса - это Facebook-страницы или 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 Функция, чтобы проверить класс перед фильтрацией, а затем назначить класс ".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;
}); 
.

Это было полезно?

Решение

<Сильное> решение

После некоторых исследований я нашел решение.Я понял, что могу использовать функцию .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;
}); 
.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top