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

Using jQuery / Javascript to apply filter function from an external link when linked page loads

本文关键字：链接 Javascript 从外部 过滤 功能 jQuery 应用 使用 加载      更新时间：2023-09-26

这是我在这里问的问题的扩展：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和按钮。

您可以使用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"。

您已经指定了使用附加标签的首选项，所以我将对此进行回答。

假设有人提出以下请求：

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

在DOM就绪的情况下，您可以检索category/hashtag值，并将其传递给您已经从点击事件处理程序调用的函数：

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

Url现在可能看起来像：

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

如果你想让散列为同一页面上的链接工作，你可以使用事件监听器来监听散列的变化：

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

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

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

$(document).ready(function () {
    // prev code
    var filter = getParameterByName('filter');
    if (filter) { showProjectsbyCatEur(filter); }
});

您必须重置过滤器功能中的活动li，而不是单击功能。希望这能消除您的实现混乱。

相关文章：