class 同位素过滤

Question

我设置了 Isotope 来过滤我的 wordpress 页面上的一些帖子。现在动画工作正常，classes/data-filters 被命名为相同的东西，但我似乎无法让它工作。显示所有按钮效果很好，但对于其他类别，所有帖子都会消失，而不是保留正确 class 名称的帖子。我已经尝试记录我所有的 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 });

});

});

Answer 1

您的选择器变量似乎试图过滤一个简单的字符串。

示例：

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

您需要添加一个“.”来告诉同位素它是一个 class:

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

Answer 2

您的过滤器链接需要 css 风格的 class 定义来过滤。

而不是 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>

class 同位素过滤

Isotope filtering by class

jquery

wordpress

jquery-isotope