Question

这是我在这里提出的问题的扩展：Owl Carousel 2: filtering items, but keep the sort order using Javascript（希望这没关系）。

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

在理想世界中，它只会使用www.example.com/pageY/#filterA等链接。

您可以看到实时网页here。

这是过滤功能：

$(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);

然后使链接类似于＆＃34; www.mysite.com/pageY/？filter = euro＆＃34;。

Answer 2

您已指定使用附加主题标签的首选项，因此我将对此进行回答。

假设有人提出以下请求：

http://www.abstract.pinkpoliceman.com/products/#all8

您可以在DOM准备好的情况下检索category / hashtag值并将其传递给您已经从click事件处理程序调用的函数：

$(document).ready(function () {
  // INSERT THE DOM READY CODE YOU ALREADY HAVE HERE

  var hash = window.location.hash;

  if(hash.length > 0)
  {
     showProjectsbyCatEur(hash.substring(hash.indexOf('#') + 1));
  }
});

<强>说明

hash.substring(hash.indexOf('#') + 1)

这将采用＆＃39;＃1234＆＃39;的哈希值并在＃＆＃39;＃＆＃39;之后对其进行子串。找到了。它基本上删除了#字符。

注意：

用户提交的标签不受您的控制。如果他们没有提交all8，您的else仍会抓住它并尝试按其过滤。所以我建议你重新考虑一下条件逻辑，以迎合“糟糕”的问题。值。

SINCE UPDATE（请求使用查询字符串参数）

获取查询字符串参数：

$(document).ready(function () { // INSERT THE DOM READY CODE YOU ALREADY HAVE HERE function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; } var filter = getUrlVars()['filter']; if(filter.length > 0) showProjectsbyCatEur(filter); });

http://jquery-howto.blogspot.co.uk/2009/09/get-url-parameters-values-with-jquery.html

Url现在看起来像：

http://www.abstract.pinkpoliceman.com/products/?filter=all8

Answer 3

user3915578编写了一个非常好的RegExp，但我认为从整体上更好地理解查询字符串会很有帮助。

浏览器使用“＃”符号来锚定页面的某些部分（就像书签在维基百科上的工作方式一样）。

location是浏览器中的内置对象。 location.search属性返回“？”后面的当前URL的一部分符号。查询字符串是在页面之间传递字符串参数的正确方法。

所以查询字符串是要走的路。您的每个链接都将加载具有分配给过滤器的不同值的页面。位置对象本身可用于在其值更改时导致重定向。

$('#project-terms8 a').click(function (e) {
    e.preventDefault();

    cat = $(this).attr('ID');

    // this line causes a redirect to the same page, but with added query string
    // to redirect to a separate page, just build the new url as a string
    location = location.origin + location.pathname + '?filter=' + cat;
});

在文档就绪功能中，您需要在每次新加载时调用过滤器函数，但前提是过滤器具有值。这就是用户3915578代码的其余部分应该去的地方。

$(document).ready(function () {
    // prev code

    var filter = getParameterByName('filter');
    if (filter) { showProjectsbyCatEur(filter); }
});

您必须重置过滤器功能中的活动li而不是单击功能。希望这可以解决您的实施混乱。

Answer 4

如果您希望哈希适用于同一页面上的链接，您可以使用事件侦听器来侦听哈希更改：

function filterByHash(){
    if(window.location.hash)//.match(/#(all8|\dx)/)
        showProjectsbyCatEur(window.location.hash.substr(1));
}

$(document).ready(filterByHash);
$(window).on('hashchange',filterByHash);

您可以使用正则表达式过滤掉无效的哈希值。

此外，如果您想支持旧浏览器，可以添加类似这样的内容而不是hashchange事件监听器：

$('#filter').on('click','a[href^=#]',function(){
    setTimeout(filterByHash,0);
});

setTimeout将函数推送到事件循环的末尾，以便在散列更改后调用它。

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

4 个答案: