从URL过滤同位素

我试图从url链接过滤我的同位素页面，已经搜索并试图实现在这里找到的例子，但无济于事。从URL过滤同位素

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

这里是我试图筛选从页面：http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php

我已经尝试了数据过滤器，＃和所有的变化？但似乎没有过滤结果。

任何想法？

来源

2016-03-15 Colin Doherty

同位素不会做到这一点本身，你必须找到自己的解决方案。从本机API过滤方法可以帮助你，但你必须提供

例如，如果您要筛选拥有一类像“冷”

你可以创建一个接受一个页面元素参数名为过滤 - 例如：http://www.yourdomain.com/page.html?filter=cold
你要拦截从Javascript的查询字符串，用一个简单的函数发现here并将其存储在一个querystringValue瓦里能够。

var querystringValue = getParameterByName（'filter'）;
一旦同位素被加载并准备 - 与所有元素，每一个拿着自己的过滤器类 - 你可以使用过滤方法，通过您收到的查询字符串进行过滤。我会假定$ grid包含对网格对象的引用。

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

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

希望你觉得这个有用。

来源

2016-04-10 00:44:33 theCodeSurgeon

该解决方案的工作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*/ 

});

来源

2017-07-24 12:06:54

从URL过滤同位素

回答

相关问题