Mixitup 过滤器消失并添加“失败”类答案

【问题标题】：Mixitup filter disappears and adds "fail" classMixitup 过滤器消失并添加“失败”类
【发布时间】：2016-04-30 16:33:51
【问题描述】：

在我的 mixitup 中，我正在做一个基本的过滤器，但是当我单击其中一个过滤器按钮时，过滤的项目会在一秒钟后出现并消失。我可以在 firebug 中看到，它将“失败”类添加到这些项目的容器中。但我看不出这是什么错误。

在代码笔中：http://codepen.io/anon/pen/PPOgwr

这是我的过滤器按钮 HTML：

<div class="row row-centered filter-section">
            <div class="col-md-7 col-centered">
              <ul class="filter">
                <li><a href="#" data-filter="all">Hepsi</a></li>
                <li><a href="#">/</a></li>
                <li><a href="#" class="filter" data-filter=".basili">Basılı İş</a></li>
                <li><a href="#">/</a></li>
                <li><a href="#" class="filter" data-filter=".kurumsal">Kurumsal Kimlik</a></li>
                <li><a href="#">/</a></li>
                <li><a href="#" class="filter" data-filter=".ilan">İlan</a></li>
                <li><a href="#">/</a></li>
                <li><a href="#" class="filter" data-filter=".ambalaj">Ambalaj</a></li>
                <li><a href="#">/</a></li>
                <li><a href="#" class="filter" data-filter=".stand">Stand</a></li>
                <li><a href="#">/</a></li>
                <li><a href="#" class="filter" data-filter=".film">Film</a></li>
              </ul>
            </div>
        </div>

这是容器：

<div class="row grid" id="grid">
          <div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
            <div class="position-relative">
              <a href="" id="silver1">
                <img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
                <div class="overlay">
                  <div class="portfolio-title text-center">
                    <h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>

                  </div>
                </div> <!-- /overlay -->
              </a>
            </div>
          </div>

          <div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
            <div class="position-relative">
              <a href="" id="silver2">
                <img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
                <div class="overlay">
                  <div class="portfolio-title text-center">
                    <h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>

                  </div>
                </div> <!-- /overlay -->
              </a>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
            <div class="position-relative">
              <a href="" id="silver3">
                <img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
                <div class="overlay">
                  <div class="portfolio-title text-center">
                    <h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>

                  </div>
                </div> <!-- /overlay -->
              </a>
            </div>
          </div>
        </div>

JS代码：

$('#grid').mixItUp();

  $('.filter-section').on( 'click', 'a.filter', function() {
    var filterValue = $(this).attr('data-filter');
    $('#grid').mixItUp('filter', filterValue, false);
    $('#grid').on('mixFail', function(e, state){
      console.log(state);
    });
  });

我需要你的帮助

【问题讨论】：

标签： javascript jquery html css mixitup

【解决方案1】：

现在给你答案可能有点晚了，但我遇到了类似的问题，作为其中的一部分，我也设法对你的问题进行了分类。

简而言之，您的问题是您在 <ul> 和 <li> 标记上应用了“过滤器”类。从您提供的 CodePen 中的 <ul> 中删除该类可以解决问题 - 尽管会弄乱您的布局。

希望这会有所帮助。

【讨论】：