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

并添加了所描述的＆＃39;至关重要的＆＃39; CSS：

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

插件初始化，CSS适用。

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

JSFiddle

我做错了什么？我已经跟着文档跟着这封信。

在我看来，它与任何物品都不匹配。但是我无法理解，因为从上面的代码可以看出肯定有匹配，因为每个项目肯定有一个与data-filter s之一匹配的类？

Answer 1

但是您没有按照文档进行操作......文档解释了您的控件上的data-filter属性需要是实际的选择器，例如带有前导点.的类（这是奇怪，我承认）。例如，data-filter="social"应为data-filter=".social"：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

MixItUp添加失败＆＃39; class to div并不过滤项目

JSFiddle

1 个答案: