加载链接页面时，使用jQuery/Javascript从外部链接应用筛选函数

这是我在这里提出的问题的延伸：（希望这没问题）

我有一个菜单，可以过滤项目。我希望在从和外部页面链接单击时应用过滤器。因此，在第X页单击FilterA，这会将您引导到第Y页，并将项目过滤到FilterA，就像您刚刚在第Y页单击FilterA一样

在理想情况下，它只需使用一个链接，如www.example.com/pageY/#filterA

您可以查看live页面

这是过滤器功能：

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

$（文档）.ready（函数（）{
功能显示ProjectsByCateur（cat）{
var owl=$（“.owl8”）.data（'owlCarousel'）；
owl.addItem（“”，0）；
var nb=owl.itemsAmount；
对于（var i=0；i<（nb-1）；i++）{
猫头鹰移动项目（1）；
}
如果（类别==‘所有8’）{
$（'#projects-copy8.project8'）。每个（函数（）{
addItem（$（this.clone（））；
});
}否则{
$（'#projects-copy8.project8.'+cat）.每个（函数（）{
addItem（$（this.clone（））；
});
}
猫头鹰移动项（0）；
}
$（'.owl8.project8'）.clone（）.appendTo（$（'#projects-copy8'））；
$（“#项目术语8 a”）。单击（功能（e）{
e、 预防默认值（）；
$（'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

}

---

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

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

假设有人提出以下请求：

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

在DOM就绪的情况下，您可以检索类别/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）

这将获取散列值“#1234”，并在找到“#”的点后对其进行子串。它基本上删除了

#

字符

注意：

用户作为标签提交的内容超出了您的控制范围。如果他们不提交

全部8

，您的

其他人仍将捕获它并尝试按它进行筛选。因此，我建议您重新考虑一下条件逻辑，以迎合“坏”值

自更新以来（请求使用查询字符串参数）

获取查询字符串参数：

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

});

$（文档）.ready（函数（）{
//在此处插入已有的DOM就绪代码
函数getUrlVars（）
{
var vars=[]，散列；
var hashes=window.location.href.slice（window.location.href.indexOf（'？'）+1）.split（'&'）；
for（var i=0；i0）
showProjectsbyCatEur（过滤器）；
});


Url现在可以如下所示：

http://www.abstract.pinkpoliceman.com/products/?filter=all8
user3915578编写了一个非常好的RegExp，但我认为这将有助于更好地理解查询字符串作为一个整体

浏览器使用“#”符号来定位页面的某些部分（如维基百科上的书签）

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

因此，查询字符串是解决问题的方法。您的每个链接都将使用分配给筛选器的不同值加载页面。location对象本身可用于在其值更改时引发重定向

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

在DocumentReady函数中，您需要在每次新加载时调用filter函数，但前提是filter有一个值。这就是user3915578的其余代码应该去的地方

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

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

您必须重置过滤器功能中的活动li，而不是单击功能。希望这能消除您对实现的困惑
 如果希望哈希对同一页上的链接起作用，可以使用事件侦听器侦听哈希更改：

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
将函数推到事件循环的末尾，以便在散列更改后调用该函数。
感谢您的回复，我正在尝试实现它，但我不完全了解需要将其添加到哪里以及如何将其应用于每个筛选项。。过滤器由id应用，因此，例如，链接更像www.mysite.com/pageY/？filter=3x是否需要将其添加到现有过滤器中？或者我正在创建一个新函数。。很抱歉，我还在学习javascript。有人能帮我实现这个答案吗？也许它可以工作，因为我被塞康困住了
$('#filter').on('click','a[href^=#]',function(){
    setTimeout(filterByHash,0);
});