使用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一起使用以及按钮一起使用即可。

- pinkp

---

如果提供的任何解决方案有帮助，请务必接受它。 - mega6382

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”的形式。

- user3915578

---

谢谢您的回复，我正在尝试实现它，但我不完全理解我需要在哪里添加它以及如何将其应用于每个过滤器项。 过滤器是通过id应用的，因此例如链接更像是www.mysite.com/pageY/?filter=3x。 我需要将其添加到现有的过滤器中吗？还是我要创建一个新函数..抱歉我还在学习javascript。 - pinkp

有人能帮我实现这个答案吗？也许它会起作用，因为我卡在第二个答案上了。 - pinkp

Answer 2

您已指定使用附加的hashtag，因此我将根据此回答。

假设有人发出以下请求：

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

在DOM准备就绪后，您可以检索类别/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仍会捕获它并尝试进行过滤。因此，我建议您重新考虑条件逻辑，以适应“错误”的值。

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

获取查询字符串参数：

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

});

这里是一个关于如何使用jQuery获取URL参数值的教程。

现在，URL可能看起来像这样： http://www.abstract.pinkpoliceman.com/products/?filter=all8

- user1017882

---

谢谢JayMee。我已经将这个添加到我的代码中了。页面已更新http://www.abstract.pinkpoliceman.com/products，但是只添加#3x例如，它只会滚动到该筛选器链接，因为它是id...没有其他的。也许最好使用？ - pinkp

抱歉JayMee，我现在遇到了这个错误：TypeError: undefined is not an object (evaluating 'owl.addItem')，也许是我的问题吗？它还破坏了轮播图。 - pinkp

嗯，不确定。除了我建议的代码引入之外，您是否还更改了其他内容？ - user1017882

删除代码后，它就正常工作了，没有错误。我只是将您的代码直接粘贴在我的现有代码之后，但在我的最终});之前不包括您的最终});（如果这很重要）。 - pinkp

让我们在聊天中继续这个讨论。点击此处进入聊天室。 - pinkp

Answer 3

如果您希望哈希在同一页链接中起作用，您可以使用事件监听器来监听哈希变化：

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

< p > setTimeout将函数推送到事件循环的末尾，以便在哈希更改后调用它。

- Leo Jiang

---

救命稻草。我找了好几个小时才找到这个。我的问题是AngularJS哈希值更新URL时有一些延迟，而活动菜单类别设置在正确的菜单上。$(window).on('hashchange',filterByHash);真的很有帮助。 - Adeel Shekhani

Answer 4

user3915578 写了一个很好的正则表达式，但我认为更好地理解查询字符串会有所帮助。

"#" 符号被浏览器用来锚定页面的某些部分（就像在维基百科上工作的书签一样）。

location 是浏览器中内置的对象。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;
});

在您的文档就绪函数中，您需要在每次加载时调用筛选函数，但仅在筛选器具有值时才需要。这就是用户3915578代码的其余部分所在。

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

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

您需要在过滤函数中重置活动的 li，而不是在单击函数中。希望这样可以消除您的实现困惑。

- pokkanome

---

非常感谢您抽出时间来解释这个问题。现在我更清楚了发生了什么，但是当我尝试添加到我的代码时仍然出现错误。我想我可能会混淆我要添加到哪些函数或者是否正在创建新的函数。我已经设置了一个 Fiddle 并想知道您是否能够向我展示它应该如何读取。您将看到有两个函数，因为我将它们拆分为两个过滤器。这不是一个完全工作的 fiddle，只是主要部分。谢谢 - http://jsfiddle.net/agwmdefx/ - pinkp

看起来你还没有完全掌握 JavaScript 中作用域的概念。jQuery 使用文档就绪函数在 DOM 就绪后立即执行 js 代码。但是你的代码不一定要在文档就绪函数内部。在 js 文件的顶层编写的代码将在加载到页面时立即执行。长话短说，每个页面上应该只有一个文档就绪函数，并且应该在顶层声明过滤函数。我会编辑你的 fiddle 来展示我的意思。 - pokkanome

我尝试通过不同的函数示例和注释来澄清事情。如果还有什么不清楚的，请告诉我：http://jsfiddle.net/o8jd6xnq/2/ - pokkanome