javascript - 将哈希过滤器传递给外部链接(类似于同位素,但自定义)

标签 javascript jquery hash jquery-isotope

示例:如果用户点击一个页面中的特定链接,该链接会将他重定向到特定区域中已过滤的内容。

I try to build an custom isotope with simple hide and show classes but now I can not make my links connect with the filtered content of other page.
*The hash is correct but it does not show the filtered content. Probably I have to do something with onhashchange function. Thank you!

//Generate URL hash
$('.filter-list .cat-item').on('click', function(){
    var filterAttr = $(this).attr('data-filter');
    location.hash = "filter=" + encodeURIComponent(filterAttr);
});
//Generate URL hash
function getHashFilter(){
    var currentHash = location.hash.match( /filter=([^&]+)/i );
    var filterValue = currentHash && currentHash[1];
    return filterValue;
}
function onHashChange(){

    var hashFilter = getHashFilter();

   /* if ( hashFilter ) {
      $container.isotope({ filter: hashFilter });
    }
   */
}
onHashChange();
window.onhashchange = onHashChange;

最佳答案

Topic closed. Below the full set of code for custom isotope grid filter.

//redirect link with js external document
$("#menu-product").click(function(){ 
    window.location.href = "shops.php#filter=product"; 
});

if (location.hash == "#filter=product") 
{ 
    $(".shop").not(".product").hide(); 
}

$(document).ready(function(){
 $(".cat-item").click(function(){

   var value =  $(this).attr("data-filter");
   if(value == "all") {
     $(".shop").show();
   }
   else
   {
     $(".shop").not("."+value).hide();
     $(".shop").filter("."+value).show();
   }});
   //Active class
    $("ul .cat-item").click(function(){
        $(this).addClass("current").siblings().removeClass("current");
    });

}); 
//Generate URL hash
$('.filter-list .cat-item').on('click', function(){
    var filterAttr = $(this).attr('data-filter');
    location.hash = "filter=" + encodeURIComponent(filterAttr);
});

function getHashFilter(){
    var currentHash = location.hash.match( /filter=([^&]+)/i );
    var filterValue = currentHash && currentHash[1];
    return filterValue;
}

function onHashChange(){
    var hashFilter = getHashFilter();
}

关于javascript - 将哈希过滤器传递给外部链接(类似于同位素,但自定义),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48020606/

相关文章:

javascript - 如何通过CloudFront实现分段上传?

javascript - 窗口的关闭属性?

javascript - 如何避免关注 slickGoTo 事件

php - 检索 redis 哈希数据

algorithm - 创建您自己的 MD5 碰撞

javascript - $.cookie 给出错误

javascript - HTM/CSS 干扰 D3.js

javascript - 使用 js 将 img 转换为灰度面临安全错误

javascript - div元素换位后效果

php - 将 MD5 哈希表示为整数