Question

我已经设置了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 });

});

});

Answer 1

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

示例：

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

你需要添加一个“。”来告诉同位素它是一个类：

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

Answer 2

您的过滤器链接需要过滤类的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>

按类

2 个答案: