在 MixItUp 中使用过滤器将哈希添加到 url答案

【问题标题】：Add hash to url with filter in MixItUp在 MixItUp 中使用过滤器将哈希添加到 url
【发布时间】：2017-02-24 06:23:44
【问题描述】：

没有关于我想要实现的功能的文档，我无法在网上找到它，所以我在这里尝试。

当用户点击过滤器时，我想在 URL 中添加一个哈希值。我正在使用MixItUp jQuery 插件。最好它需要记住带有 localstorage 的 url 哈希，这样如果用户关闭或刷新页面，用户最后点击的过滤器仍然处于活动状态。

Isotope 有the thing 我想实现，但我无法让它在 MixItUp 中工作，虽然它似乎是一种类似的技术？也许这里有人能够让它工作。

我知道当用户点击过滤器时如何向 url 添加哈希，但刷新后活动状态重置为“全部”。

过滤器的HTML：

<section id="menu">
   <a id="one" class="filter menu-button active" data-filter="all">One</a>
   <a id="two" class="filter menu-button" data-filter=".selected:not(.button-exclude)">Two</a>
   <a id="three" class="filter menu-button" data-filter=":not(.selected)">Three</a>
 </section>`

添加哈希的JS：

$(document).ready(function() {
   $("#menu a").click(function(e) {
     window.location.hash = $(this).attr("id");
     e.preventDefault();
   });
});

提前谢谢你。

【问题讨论】：

标签： jquery hash jquery-isotope mixitup

【解决方案1】：

我知道这有点延迟回复，但我现在才遇到这个问题。

为了基于散列初始化过滤器，我需要更多的 HTML 代码用于过滤区域。同时，我在这里复制我的解决方案，它使用 data-filter 属性工作。在我的例子中，我使用类将数据过滤器链接到可过滤元素。

HTML 看起来像这样：

<div class="filtering">
  <span><a data-filter="all"><span>Show all</span></a></span>
  <ul>
    <li><a data-filter="._training-videos">Training Videos</a></li>
    <li><a data-filter="._how-to-guides">How-To Guides</a></li>
    <li style="display: none;"><a data-filter="all">Show all</a></li>
  </ul>
</div>


<section class="filter">    
  <article class="video _training-videos">
    <a class="various fancybox.iframe" href="https://www.youtube.com/embed/CY1wYKq5sLU?autoplay=1&amp;rel=0">
        <img src="/images/videos/CY1wYKq5sLU.jpg" />
    </a>
    <h4>What you need to know about online marketing</h4>
  </article>

  <article class="video _how-to-guides">
    <a class="various fancybox.iframe" href="https://www.youtube.com/embed/L2QfjcgDjsY?autoplay=1&amp;rel=0">
        <img src="/images/videos/L2QfjcgDjsY.jpg" />
    </a>
    <h4>Handling, Cleaning, Playing your Vinyl</h4>
  </article>
</section>

顶部的块 (div.filtering) 是过滤器下拉列表（类别），而底部的块 (section.filter) 是链接到 YouTube 视频的图像区域。

为了预加载过滤器，而不是像初始化 MixItUp 代码

$('.filter').mixItUp();

您需要使用 { load: { filter: data_filter } } 设置。这显然是在您从 URL 中获取散列值之后。

这是完整的代码 sn-p:

//  MixItUp init script
$(function () {
    //  Get the hash value from the URL
    var hashedValue = window.location.hash;
    if (hashedValue.replace('#', '') == '') {
        hashedValue = 'all';            //  Use the default filter if there's no hash value
    } else {
        hashedValue = '._' + hashedValue.replace('#', '');      //  Try to figure out the filter class based on the hash value
    }

    //  Make sure the filter dropdown selects the hash item
    $('.filtering').find('[data-filter="' + hashedValue + '"]').click();

    //  Init MixItUp
    $('.filter').mixItUp({
        load: {
            filter: hashedValue
        }
    });
});

请注意，您需要分别设置下拉菜单 (.filtering) 和可过滤区域 (.filter)。

根据您的代码，我认为您需要进行的更改：

hashedValue = hashedValue.replace('#', '');

还有

$('#menu').find('#' + hashedValue).click();

但我需要您过滤后的区号，以便在这方面给您建议。

希望这会有所帮助。 :)

【讨论】：