没有关于我想要实现的功能的文档,而且我无法在线找到它,所以我在这里尝试。
我想在用户点击过滤器时向网址添加哈希值。我正在使用MixItUp jQuery插件。最好是需要记住localstorage的url哈希,因此如果用户关闭或刷新页面,用户上次点击的过滤器仍然有效。
Isotope我想要the thing,但我无法在MixItUp中使用它,虽然它似乎是一种类似的技术?也许这里有人能够让它发挥作用。
我知道如何在用户点击过滤器时向网址添加哈希值,但在刷新后,活动状态会重置为“全部”#。
过滤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 for add hash:
$(document).ready(function() {
$("#menu a").click(function(e) {
window.location.hash = $(this).attr("id");
e.preventDefault();
});
});
提前谢谢。
答案 0 :(得分:0)
我知道这有点延迟回复,但我现在才遇到这个问题。
为了根据哈希初始化过滤器,我需要为过滤区域添加更多的代码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&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&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获得散列值。
以下是整个代码段:
// 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();
但是我需要你的过滤区域代码来为你提供有关这方面的建议。
希望这会有所帮助。 :)