我正在使用Isotope与哈希历史记录。它工作得很好,但我对这个 URL 不满意 - 我想简化和清理它。
当前使用:
var href = $this.attr('href').replace( /^#/, '' );
var option = $.deparam( href, true );`
在此标记上:
<li><a href="#filter=.work/">Work</a></li>
那么,我的问题是:如何让它与以下标记一起工作?
<li><a href="#/work/">Work</a></li>
我仅使用过滤器,所有其他同位素选项均已锁定,因此我希望删除对过滤器的引用。
提前致谢!
最佳答案
我正在使用这个:
function getHashFilter() {
var hash = location.hash;
// get filter=filterName
var matches = location.hash.match(/^#?(.*)$/)[1]; // this is to get the name of the class
var hashFilter = matches;
return hashFilter;
}
$( function() {
var $container = $('. isotope');
// bind filter button click
var $filters = $('#filters').on( 'click', 'span', function() {
var filterAttr = $( this ).attr('data-filter');
// set filter in hash
location.hash = '/' + filterAttr.substr(1); // adding the slash for the url
});
var isIsotopeInit = false;
function onHashchange() {
var hashFilter = getHashFilter();
if ( !hashFilter && isIsotopeInit ) {
return;
}
isIsotopeInit = true;
// filter isotope
$container.isotope({
itemSelector: '.element-item',
filter: '.' + hashFilter.substr(1) //adding the . so it can match the data-filter
});
// 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();
});
我意识到 * 在此之后将不起作用。因此,您需要添加另一个类/数据过滤器来显示所有内容。
关于jQuery 同位素哈希历史记录 : prettify the hash-URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7555959/