如何使用 URL 哈希实现同位素过滤？答案

【问题标题】：How Can I Implement Isotope Filtering with URL Hashes?如何使用 URL 哈希实现同位素过滤？
【发布时间】：2020-10-25 08:23:11
【问题描述】：

（虽然这始终提到了 Wordpress，但我认为这不是 Wordpress 特有的问题）

我正在使用 Wordpress 开发个人网站，主题使用的软件包之一是 Isotope by Metafizzy。这是为了过滤带有链接的页面上的帖子。

你可以看到页面here

我想尝试实现类似于mypoorbrain.com 的东西，其中使用 URL 哈希过滤页面。这样做的好处是，如果用户是另一个页面，他可以导航到http://www.mypoorbrain.com/#illustration 并且仍然会在过滤后的内容上结束。

我浏览了 Isotope 文档和 is a section for implementing URL hashes，这是我在结束 <head> 标记之前插入的代码：

<script>
  function getHashFilter() {
    var hash = location.hash;
    // get filter=filterName
    var matches = location.hash.match(/filter=([^&]+)/i);
    var hashFilter = matches && matches[1];
    return hashFilter && decodeURIComponent(hashFilter);
  }
  $(function() {

    var $grid = $('.isotope');

    // bind filter button click
    var $filters = $('#filters').on('click', 'button', function() {
      var filterAttr = $(this).attr('data-filter');
      // set filter in hash
      location.hash = 'filter=' + encodeURIComponent(filterAttr);
    });

    var isIsotopeInit = false;

    function onHashchange() {
      var hashFilter = getHashFilter();
      if (!hashFilter && isIsotopeInit) {
        return;
      }
      isIsotopeInit = true;
      // filter isotope
      $grid.isotope({
        itemSelector: '.selector col-md-6 col-lg-4',
        filter: hashFilter
      });
      // set selected class on button
      if (hashFilter) {
        $filters.find('.is-checked').removeClass('is-checked');
        $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
      }
    }

    $(window).on('hashchange', onHashchange);
    // trigger event handler to init Isotope
    onHashchange();
  });
</script>

但这无济于事。

我认为这里的问题在于正确选择 div 元素（链接和被排序的元素）。根据我使用检查元素的猜测，选择整个项目网格的代码是.selector col-md-6 col-lg-4'，查找过滤器按钮（或链接）的代码是var $filterButtonGroup = $('.m-filters'); ，但就像我说的那样，这没有任何作用。

我做错了什么？如何确保过滤器在地址栏中显示为哈希链接？

【问题讨论】：

我不知道你是否听说过 mixitup 库，但它是一种超级简单的过滤方法，适用于我的情况
@ProKemikon 我刚刚看过它。它是否支持 URL 哈希？我坚持使用 Isotope 的原因是它内置在我的主题中。 ://
你能展示你尝试过的工作演示吗？ (codepan, jsbin..)
@MoshFeu 我已经尝试过加载代码笔文件here 中可能的内容，但过滤过程不起作用。我的理解是，工作演示在我在帖子中链接的网站上（this one）。我将更新我的帖子以反映我最近尝试过的代码。

标签： javascript html jquery css wordpress

【解决方案1】：

解决方法有几个步骤：

没有.isotope 类的元素，所以将这个类添加到父类（.row 元素）。
您设置给孩子的内联style与假设设置的样式同位素冲突，删除它。
您在a 元素上收听click 事件，而data-filter 在lis 上。因此，将事件侦听器更改为 $('#filters').on( 'click', 'li',..（您也可以以不同的方式绑定 click 事件，但这超出了此答案的范围）。
您不需要itemSelector 选项（当您调用$grid.isotope 时），因为您想要过滤默认行为的直接子代。顺便说一句，.selector col-md-6 col-lg-4' 是无效的选择器。如果有的话，应该是.selector.col-md-6.col-lg-4'。

我在以下提交中收集所有这些更改：https://github.com/moshfeu/isotope.js/commit/62b9798871e9452ade26d6e2863699869b8cb612。

【讨论】：

感谢您提供如此详细的答复。我已经用你提到的几点来回参考了代码，我做错了什么是有道理的！如果您不介意进一步帮助我，我已经使用<script> 在我的页面上添加了编译提交中的JS 代码，但是当我使用a url hash 转到页面时，同位素网格仍然存在停留在All。是否应该有其他方法来添加它？
从 github diff 复制粘贴是有风险的 ;)。例如，还有@@ -27,15 +26,17 @@ $( function() {。尝试仅复制较新的版本 - github.com/moshfeu/isotope.js/blob/…。
不走运，请尝试链接！ thedivtagguy.com/#mishmash 我确实注意到第 32 行 // itemSelector: '.selector.col-md-6.col-lg-4', 已被注释掉。删除它会有所不同吗？
应该注释掉。由于某种原因，您的 jQuery 版本使用了jQuery，但没有公开$ 函数。所以你可以用(($) => { // the code goes here })(jQuery); 包装代码。像这样：i.stack.imgur.com/d3ZJa.png
Nvm，我在另一个页面上试过了，它就像一个魅力！太感谢了。最后一个问题，如果我能打扰您的话，是否可以删除#filter=.mishmash 并让它成为#mishmash？因为目前如果我不输入它就不起作用。