MixItUp 将“失败”类添加到 div 并且不过滤项目

Question

我正在尝试使用MixItUp 过滤网格项目。它说它应该很简单。添加类mix和另一个类作为项目的类别，然后添加具有相同类别的按钮。

<!-- The buttons -->
<button class="filter" data-filter="social">Email</button>
<button class="filter" data-filter="games">Games</button>
<button class="filter" data-filter="merch">Merchandise</button>

<!-- The grid -->
<div class="portfolio-grid" id="MixItUpBCE8F4">
   <div class="portfolio-item mix merch"></div>
   <div class="portfolio-item mix social"></div>
   <div class="portfolio-item mix games"></div>
</div>

我已经这样初始化了插件：

jQuery(document).ready(function($) {
    $(function(){
        $('.portfolio-grid').mixItUp();
    });
});

并添加了描述的“重要”CSS：

.portfolio-grid .mix{display: none;}

插件初始化，CSS应用。

但是，单击任何按钮只会导致网格项淡出。页面上没有显示任何项目。

JSFiddle

我做错了什么？我已经完全按照文档进行操作了。

在我看来，它与任何项目都不匹配。但我无法理解，因为正如您从上面的代码中看到的那样，肯定有匹配项，因为每个项目肯定都有一个与data-filters 之一匹配的类？

Answer 1

但是您没有遵循文档...文档解释说您的控件上的 data-filter 属性需要是实际的选择器，例如带有前导点的类 .（我承认这很奇怪）。例如，data-filter="social" 应该是 data-filter=".social"：

jQuery('.portfolio-grid').mixItUp();

.portfolio-item {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin-bottom: 20px;
  display: none;
}
.portfolio-item:first-child {
  background-color: blue;
}
.portfolio-item:last-child {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2"></script>

<!-- The buttons -->
<button class="filter" data-filter=".social">Email</button>
<button class="filter" data-filter=".games">Games</button>
<button class="filter" data-filter=".merch">Merchandise</button>

<!-- The grid -->
<div class="portfolio-grid" id="MixItUpBCE8F4">
   <div class="portfolio-item mix merch"></div>
   <div class="portfolio-item mix social"></div>
   <div class="portfolio-item mix games"></div>
</div>