javascript - 在URL中显示同位素组合过滤器项

Question

我有一个投资组合过滤器，我想将特定的过滤器与其他页面链接

<ul class="filter">
<li><a class="active" href="#" data-filter=".cat1">Branding</a></li>
<li><a href="#" data-filter=".cat2">Creative</a></li>
<li><a href="#" data-filter=".cat3">Website Design</a></li>
</ul>

从上面的代码来看，它具有三个品牌，创意和网站设计。筛选器工作正常，我想将筛选器项与其他页面链接。
例如我想将广告素材与广告素材页面链接，然后单击广告素材页面中的广告素材链接，然后应转到默认设置为广告素材的投资组合页面。我添加这样的链接
http://url.com/portfolio#filter=.cat2但它不起作用

http://isotope.metafizzy.co中的此javascript

$(document).ready(function () {
    var $container = $('.full-portfolio .items');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'fitRows',
            onLayout: realignCaptions
        });

    });

    // hook to window resize to resize the portfolio items for fluidity / responsiveness
    $(window).smartresize(function() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();

        for ( var i = 0; i < isotopeBreakpoints.length; i++ ) {
            if (windowWidth >= isotopeBreakpoints[i].min_width || !isotopeBreakpoints[i].min_width) {
                if (windowWidth < isotopeBreakpoints[i].max_width || !isotopeBreakpoints[i].max_width) {
                    $container.find('.item').each(function() {
                        $(this).width( Math.floor( $container.width() / isotopeBreakpoints[i].columns ) );
                    });

                    break;
                }
            }
        }
    });

    $(window).trigger( 'smartresize' );


    $('.filter li a').click(function () {

        $('.filter li a').removeClass('active');
        $(this).addClass('active');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });

        return false;
    });
});

// Vertically realign the captions inside portfolio items
function realignCaptions($container) {
  $container.each(function() {
         var $h5 = $(this).find('a h5');
         $h5.css( 'margin-top', $(this).height() / 2 - $h5.get()[0].clientHeight / 2 );
    });
}

var $wrapper = $('.fix-portfolio .items .item');
$wrapper.find('a h5').css('visibility', 'hidden');

$(document).imagesLoaded(function() {
    $wrapper.find('a h5').css('visibility', 'visible');
    realignCaptions($wrapper);
});

Answer 1

我可以想到2个选择。

选项1：

HTML：

<ul class="filter">
    <li><a class="active" href="#filter-cat1">Branding</a></li>
    <li><a href="#filter-cat2">Creative</a></li>
    <li><a href="#filter-cat3">Website Design</a></li>
</ul>

JS：

(function(){
    var hash = window.location.hash;
    var fitler = '';
    if(hash.match(/filter-cat/)){
        filter = hash.replace('filter-','.');
    } 
    $container.isotope({
        filter: filter
    });
})

懒得测试它，但是至少在出现问题时，您应该了解逻辑。

选项2：

与选项1相同的逻辑，只是使用cookie而不是hash标签。