0

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

在codepen中：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);
    });
  });

我需要你的帮助

4

1 回答 1

1

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

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

希望这可以帮助。

于 2016-04-21T08:54:27.413 回答