Question

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

我尝试使用简单的隐藏和显示类来构建自定义同位素，但现在我无法使我的链接与其他页面的过滤内容连接。
*哈希是正确的，但它不显示过滤的内容。   可能我必须使用 onhashchange 功能做一些事情。谢谢！

//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;

Answer 1

主题已关闭。下面是自定义同位素网格过滤器的全套代码。

//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();
}

将哈希过滤器传递给外部链接（如同位素但是自定义）

1 个答案: