在链接页面加载时,使用jQuery/Javascript从外部链接应用过滤器功能

Question

这是我在这里问的问题的扩展:Owl Carousel 2:过滤项目,但使用Javascript保持排序顺序(希望这没关系).

我有一个过滤项目的菜单.我希望在单击和外部页面链接时应用过滤器.因此,在第X页上,单击FilterA,它会将您定向到页面Y并将项目过滤到FilterA,就像您刚刚单击第Y页上的FilterA一样.

在理想的世界中,它只需使用链接,例如www.example.com/pageY/#filterA.

你可以在这里看到实况页面.

这是过滤功能:

$(document).ready(function () {
function showProjectsbyCatEur(cat) {
    var owl = $(".owl8").data('owlCarousel');

    owl.addItem('<div/>', 0);

    var nb = owl.itemsAmount;
    for (var i = 0; i < (nb - 1); i++) {
        owl.removeItem(1);
    }

    if (cat == 'all8') {
        $('#projects-copy8 .project8').each(function () {
            owl.addItem($(this).clone());
        });
    } else {
        $('#projects-copy8 .project8.' + cat).each(function () {
            owl.addItem($(this).clone());
        });
    }
    owl.removeItem(0);
}
$('.owl8 .project8').clone().appendTo($('#projects-copy8'));
$('#project-terms8 a').click(function (e) {
    e.preventDefault();
    $('#project-terms8 a').removeClass('active');

    cat = $(this).attr('ID');
    $(this).addClass('active');
    showProjectsbyCatEur(cat);
});
});

我的过滤器菜单如下所示:

<div id="filter">
            <h1 class="title">Eurorack</h1>
                <div id="project-terms8">
                <ul class="filter">
                   <li class="filter"><a id="all8" class="active all" onclick="event.preventDefault();" href="#">Show All</a></li>

                   <li class="filter 3x"><a id="3x" onclick="event.preventDefault();" href="#">Clocks, Logic &amp; CV</a></li>

                    <li class="filter 2x"><a id="2x" onclick="event.preventDefault();" href="#">Filters &amp; Resonators</a></li>

                    <li class="filter 1x"><a id="1x" onclick="event.preventDefault();" href="#">Waveform Modifiers</a></li>

               </ul>
                </div>

所以到目前为止的答案是有帮助的,但不能完全解决我的问题.如果其他人有任何建议会很棒!似乎使用#是没有用的,因为过滤器使用id,这只是创建锚点到过滤器,所以/?filter=FILTERITEM最好.

或者,新的过滤系统也可以.只要排序顺序保持不变,这可以与URL和按钮一起使用.

Answer 1

您可以使用 javascript 获取 url 参数并在过滤器中使用它。

function getURLParameter(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null

}

var filter= getParameterByName('filter');
showProjectsbyCatEur(filter);

然后将链接设置为“www.mysite.com/pageY/?filter=euro”。