0

我一直在尝试实现很棒的同位素插件http://isotope.metafizzy.co/index.html

我遇到了一个过滤器问题，到目前为止找不到解决方法：

发生的情况是，当单击“全部”过滤器链接时，会显示所有项目，但是当单击任何其他过滤器链接时，所有项目都会消失。我真的很感激一些帮助:)

我已经建立了一个JSFiddle

这是代码：

HTML：

<div class="large-12 columns">
    <ul id="portfolio-filter">
        <li><a href="#" data-filter="*">ALL</a></li>
        <li><a href="#" data-filter=".website">WEBSITE</a></li>
        <li><a href="#" data-filter=".logos">LOGOS</a></li>
        <li><a href="#" data-filter=".illustrations">ILLUSTRATIONS</a></li>
        <li><a href="#" data-filter=".brand">BRAND</a></li>
        <li><a href="#" data-filter=".ui">UI</a></li>
        <li><a href="#" data-filter=".icons">ICONS</a></li>
    </ul>
    <div id="portfolio-container">
        <ul class="small-block-grid-2">
            <li><div class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-02.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-03.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-04.jpg" alt=""></a></div></li>
            <li><div class="ui"><a href="#"><img src="img/portfolio/small-05.jpg" alt=""></a></div></li>
            <li><div class="icons"><a href="#"><img src="img/portfolio/small-06.jpg" alt=""></a></div></li>
            <li><div class="website"><a href="#"><img src="img/portfolio/small-07.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-08.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-09.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-10.jpg" alt=""></a></div></li>
            <li><div class="ui"><a href="#"><img src="img/portfolio/small-11.jpg" alt=""></a></div></li>
            <li><div class="icons"><a href="#"><img src="img/portfolio/small-12.jpg" alt=""></a></div></li>
            <li><div class="website"><a href="#"><img src="img/portfolio/small-13.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-14.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-15.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-16.jpg" alt=""></a></div></li>
        </ul>   
    </div><!-- /portfolio-container -->
</div><!-- /large-12 columns -->

JavaScript：

$(document).ready(function(){

  // cache container
  var $container = $('#portfolio-container');
  // initialize isotope
  $container.isotope({
    // options...
  });

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

1 回答 1

1
  1. 将选择器类直接应用于<li>内部元素<ul class="small-block-grid-2">并清除图像周围的 div。
  2. 确保所有 img 标签都正确关闭，<img ..... />.
  3. 将同位素应用于<ul class="small-block-grid-2">

HTML

<div id="portfolio-container">
    <ul class="small-block-grid-2">
        <li class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt="" /></a></li>
        ...
    </ul>
</div>

javascript

var $container = $('.small-block-grid-2');
// initialize isotope
$container.isotope({
    // options...
});

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

更新的小提琴

于 2013-03-23T23:50:29.863 回答