Изотопная фильтрация по классам

Я настроил Isotope для фильтрации некоторых сообщений на моей странице WordPress. Прямо сейчас анимация работает нормально, и классы/фильтры данных называются одинаково, но я не могу заставить ее работать. Кнопка «Показать все» отлично работает, но для других категорий все сообщения исчезают, а не остаются сообщения с правильными именами классов. Я попытался зарегистрировать все свои переменные js, и, насколько я понимаю, они кажутся правильными. Кто-нибудь знает, почему это не работает?

http://codepen.io/kathryncrawford/pen/WwevaG

JS

$(function ($) {

var $container = $('.js-grid'); //The class for the list with all the case studies
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
    itemSelector : '.js-case-item',
    layoutMode : 'vertical'
});

//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('.js-filter-container'),
$optionLinks = $optionSets.find('a');

$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('js-selected') ) {
  return false;
}
$optionSets.find('.js-selected').removeClass('js-selected');
$this.addClass('js-selected');

//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });

});

});

wordpress jquery jquery-isotope
person Kathryn Crawford    schedule 24.02.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ваша переменная селектора, похоже, пытается отфильтровать простую строку.

Пример:

var selector = $(this).attr('data-filter');
console.log(selector) //output: 'app_dev'

Вам нужно добавить «.», чтобы указать изотопа, что это класс:

var selector = '.' + $(this).attr('data-filter');
console.log(selector) //output: '.app_dev'
person Fernando Salas    schedule 24.02.2016
comment
Ох, я знал, что это должно быть что-то простое! Спасибо! - person Kathryn Crawford; 25.02.2016
comment
@KathrynCrawford Я должен сказать вам, что мое решение приведет к тому, что кнопка «Показать все» перестанет работать. Попробуйте использовать условный оператор, чтобы увидеть, является ли $(this).attr('data-filter') == "*", чтобы в этом случае не добавлять точку. Также использование $(this).data('filter'); будет немного чище. - person Fernando Salas; 25.02.2016
comment
О круто, спасибо! Я добавил, что оператор if и фильтр all также отлично работают. - person Kathryn Crawford; 25.02.2016

arrow_upward
1
arrow_downward

Ваши ссылки на фильтры требуют определение класса в стиле css для фильтрации.

Вместо data-filter="app_dev" вам нужно data-filter=".app_dev".

Одна из ваших ссылок в качестве лучшего примера:

<a class="l-case-studies-filter-link || s-case-studies-filter-link || s-case-studies-filter-link-1 || s-link-no-underline || js-filter" rel="bookmark" data-filter="app_dev">App Dev</a>

должно быть

<a class="l-case-studies-filter-link || s-case-studies-filter-link || s-case-studies-filter-link-1 || s-link-no-underline || js-filter" rel="bookmark" data-filter=".app_dev">App Dev</a>

person DROPKICK    schedule 24.02.2016