jQuery的：使用URL散列/片段標識符顯示/隱藏物品

我有一個基本的jQuery click函數來顯示/隱藏的項目基於他們data-filter屬性不使用像同位素插件，只是一個簡單的顯示/隱藏功能 - 和我'd還希望在出現時使用網址哈希應用過濾器，並將「活動」類添加到相應的過濾器按鈕。jQuery的：使用URL散列/片段標識符顯示/隱藏物品

在標記，還有的div與「項」級網格，每個包含anchor元素有關data-filter，就像這樣：下面

<div class="item"> 
    <a href="#" class="item-anchor" data-filter="apples">Item</a> 
</div>

在我的方法，我試圖讓URL哈希，隱藏其錨不匹配哈希字符串，活動類追加到匹配.filter-button元素的所有元素：

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

    if (hash) { 

     $('.item').each(function() { 
      $(this).children('.item-anchor').data('filter') !== hash;    
     }).hide(); 

     $('a.filter-button[href="hash"]').addClass('active'); 

    } 
});

我從this thread得到了一些幫助，但我的情況我有點不同。有趣的是，上面的代碼是造成所有的.item的div隱藏和根據需要.active類沒有被追加，所以我不知道我要去哪裏錯在這裏。任何援助非常感謝，請讓我知道是否需要進一步澄清。

來源

2017-04-13 nickpish

你應該調用，而不是每個功能的過濾功能。另外，你需要返回我們應該基於的布爾值。我不太確定你的鏈接.active是幹什麼的，但我確定你想用哈希過濾它。

$(window).load(function() { 
    var hash = window.location.hash.substring(1); 
    if (hash) { 
     $('.item').filter(function() { 
      return $(this).children('.item-anchor').data('filter') !== hash;    
     }).hide(); 

     $('a.filter-button[href="#'+hash+'"]').addClass('active'); 
    } 
});

來源

2017-04-13 02:44:12 Neil

非常感謝@ nfn-neil;我試圖在某個時候使用'filter'函數，但沒有做到這一點（即返回布爾值）。另外一個相關的問題：我該如何去處理*不*隱藏任何'.item'元素如果散列/碎片值*不匹配任何「數據過濾器」的值？我意識到我的方法存在一個問題，如果一個哈希值被附加到沒有匹配過濾器的URL後面（儘管不太可能），所有項目都將被隱藏......再次感謝！ – nickpish

jQuery的：使用URL散列/片段標識符顯示/隱藏物品

回答

相關問題