按类别过滤同位素答案

【问题标题】：Isotope filtering by class按类别过滤同位素
【发布时间】：2016-02-24 22:05:20
【问题描述】：

我已设置 Isotope 来过滤我的 wordpress 页面上的一些帖子。现在动画工作正常，类/数据过滤器命名相同，但我似乎无法让它工作。 Show all 按钮效果很好，但对于其他类别，所有帖子都会消失，而不是保留正确类名的帖子。我已经尝试记录我所有的 js 变量，据我所知，它们似乎是正确的。有人知道为什么这不起作用吗？

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

$(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 });

});

});

【问题讨论】：

标签： jquery wordpress jquery-isotope

【解决方案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'

【讨论】：

呃，我知道这一定很简单！谢谢！
@KathrynCrawford 我必须告诉你，我的解决方案将导致“显示全部”按钮停止工作。尝试使用条件语句来查看 $(this).attr('data-filter') == "*" 是否在这种情况下不添加点。也使用$(this).data('filter'); 会更干净一些。
太棒了，谢谢！我补充说 if 语句和 all 过滤器也很好用。

【解决方案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>

【讨论】：