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

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

然后使链接类似于“www.mysite.com/pageY/?filter=euro”。

Answer 2

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

假设有人提出以下请求：

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

您可以在 DOM 准备就绪时检索类别/标签值并将其传递给您已经从 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)

这将获取 '#1234' 的哈希值，并在找到 '#' 的点之后对其进行子串化。它基本上删除了# 字符。

注意：

用户作为主题标签提交的内容超出了您的控制范围。如果他们不提交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

网址现在看起来像：

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

Answer 3

user3915578 写了一个非常好的正则表达式，但我认为它有助于更​​好地理解整个查询字符串。

浏览器使用“#”符号来锚定页面的某些部分（例如书签在 Wikipedia 上的工作方式）。

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;
});

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

$(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 将函数推送到事件循环的末尾，以便在哈希更改后调用它。