Question

我试图从网址链接中过滤我的同位素页面，搜索并尝试实现此处找到的示例，但无济于事。

这是同位素页面： http://www.dotsdesign.tv/ipltest/rs-case-studies-grid.php

以下是我要过滤的网页：http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php

我已尝试过数据过滤器的所有变体，＃和？但似乎没有什么可以过滤结果。

有什么想法吗？

Answer 1

Isotope原本不会这样做，你必须找到自己的解决方案。本机API的过滤方法可以帮助您，但您必须提供

例如，如果您想过滤拥有类似＆＃34;冷＆＃34;

等类的元素

您可以创建一个接受名为过滤器的参数的页面 - 例如： http://www.yourdomain.com/page.html?filter=cold
您必须使用找到here的简单函数拦截Javascript中的查询字符串，并将其存储在querystringValue变量中。

var querystringValue = getParameterByName（＆＃39; filter＆＃39;）;
一旦同位素加载并准备好 - 所有元素，每个元素都拥有自己的过滤器类 - 你可以使用过滤器方法按您收到的查询字符串进行过滤。我假设 $ grid 包含对网格对象的引用。

$ grid.isotope（{filter：querystringValue}）;

这只是其中一种可能性，但它确实有效。您当然应该编写一种机制来处理不是有效过滤器的查询字符串参数。

希望你觉得这很有用。

Answer 2

此解决方案是100％的工作例如
如果你想从不同的页面传递过滤器类别，那么写如下 http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php#infographic

同位素本页 http://www.dotsdesign.tv/ipltest/rs-case-studies-grid.php

 <ul class="filters">
    <li class="filter selected"><a href="#" data-filter="*">All</a></li><br>
    <li class="filter"><a href="#" data-filter=".isotope-category-
    infographic">Infographic</a></li>
    <li class="filter"><a href="#" data-filter=".isotope-category-
    motiongraphic">Motion graphic</a></li>
</ul>

<ul id="portfolio" class="masonry-grid ">
    <li class="masonry-grid-item isotope-category-infographic">infographic 
    data</li>
    <li masonry-grid-item isotope-category-motiongraphic>motion graphic 
    data</li>
</ul>

现在在jquery中编写以下代码：

$(window).load(function(){
    var hashID = window.location.hash.substring(1);

    /*$container is an isotope container.it may be different
    a container is a wrapper for filter data
    here is masonry-grid is a container*/

    $container.isotope({ filter: ".isotope-category-"+hashID });

    /*other filter selected logic you can apply to your HTML structure here*/

});

从URL过滤同位素

2 个答案: