1

jQuery Isotope を使用してポートフォリオ セクションをフィルタリングしています

マイフィルター

      <div id="filters" class="portfolioSection">
        <ul>
          <li><a class="current" href="#" data-filter="*">All</a></li>
          <li><a href="#" data-filter="category-1">Category 1</a></li>
          <li><a href="#" data-filter="category-2">Category 2</a></li>
          <li><a href="#" data-filter="category-3">Category 3</a></li>
        </ul>
      </div>

コンテンツセクション

<div class="portfolioContent">
            <ul class="row">
              <li class="portfolio element category-1 category-2"><img src="img/project1.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-3"><img src="img/project2.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-3"><img src="img/project3.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-3"><img src="img/project4.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-1 category-3"><img src="img/project5.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-2"><img src="img/project6.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-1 category-2"><img src="img/project7.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-2"><img src="img/project8.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
            </ul>
          </div>

私のJqueryコード：

var $container = $('.portfolioContent');
// initialize isotope
$container.isotope({
  // options...
    itemSelector : '.portfolio',
  //layoutMode : 'fitRows'
});

// filter items when filter link is clicked
$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});

すべて以外をクリックすると、すべてのコンテンツが消えます。また、スムーズな移行の効果もありません。

リンク: http://play.mink7.com/sophiance/ 表示セクションをクリックします

4

1 に答える 1

5

あなたの構文は少し間違っています：

<li><a href="#" data-filter="category-1">Category 1</a></li>

次のようにする必要があります。

<li><a href="#" data-filter=".category-1">Category 1</a></li>

.クラス名の前に注意してください

アイソトープのドキュメントから

于 2013-06-04T11:54:25.267 に答える