Question

我在我正在启动的网站上使用Isotope filtering，我无法弄清楚为什么当我点击应该触发过滤的链接时没有任何反应。

可以在此处查看（测试）页面：http://www.youngandsmitten.com/pages/frontpage

我在这里创建了一个jsfiddle：http://jsfiddle.net/UeBnU/

我在这里做错了吗？或者可能是因为我在整个Shopify回旋之上构建网站时某处存在冲突？

任何帮助都会非常感激！谢谢串！

我使用的html是：

<div class="portfolioFilter p15">Filter: <a class="current" href="#" data-filter="*">All Designs</a> <a href="#" data-filter=".forkids">For Kids</a> <a href="#" data-filter=".animals">Animals</a> <a href="#" data-filter=".food">Food</a> <a href="#" data-filter=".objects">Objects</a></div>
<div class="portfolioContainer">
<div class="objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_01.jpg?1869" /></div>
<div class="forkids animals"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_02.jpg?1869" /></div>
<div class="food"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_03.jpg?1869" /></div>
<div class="forkids animals"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_04.jpg?1869" /></div>
<div class="animals objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_05.jpg?1869" /></div>
<div class="forkids food objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_06.jpg?1869" /></div>
<div class="food objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_07.jpg?1869" /></div>
<div class="food"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_09.jpg?1869" /></div>
</div>

额外的CSS非常基础：

.portfolioFilter { padding: 10px 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; text-transform: uppercase; }
.portfolioFilter a { margin-right: 10px; color: #666; text-decoration: none; }
.portfolioFilter a:first-child { margin-left: 50px; }
.portfolioFilter a.current, a:hover { color: #e81c1c; }
.portfolioContainer img { margin: 5px; }

.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }

JavaScript：

  <script>
    $(window).load(function(){
        var $container = $('.portfolioContainer');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        $('.portfolioFilter a').click(function(){
            $('.portfolioFilter .current').removeClass('current');
            $(this).addClass('current');

            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
             });
             return false;
        }); 
    });
  </script>

Answer 1

我认为你复制了

var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector });

来自官方文档。您将必须为同位素项目（在您的情况下为图像）提供该数据字段。

<div data-filter="whatever"> .... </div>

然后它将选择具有data-filter =“whatever”集的每个属性。

还有来自Desandro（同位素的创造者）的非常好的jsfiddles只是google for desandro jsfiddle。但是这应该会让你了解过滤在Isotope中是如何工作的。

http://jsfiddle.net/desandro/GwBa8/

Answer 2

我发现两个javascript函数之间实际上存在冲突。一旦我省略了Shopify主题scripts.js附带的it works like a charm。

同位素过滤不适用于jquery .click调用

2 个答案: