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

Posted 2023-03-10

【中文标题】加载链接页面时，使用 jQuery / Javascript 从外部链接应用过滤器功能

【英文标题】：Using jQuery / Javascript to apply filter function from an external link when linked page loads

【发布时间】：2015-09-18 19:13:38

【问题描述】：

这是我在这里提出的问题的延伸：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 和按钮一起使用。

【问题讨论】：

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

【参考方案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”。

【讨论】：

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

谁能帮我实现这个答案，也许它会起作用，因为我坚持第二个答案？

【参考方案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

【讨论】：

谢谢JayMee。我将此添加到我的代码中。该页面已更新abstract.pinkpoliceman.com/products，但例如添加#3x 只是向下滚动到该过滤器链接作为它的 id... 而没有别的。可能 ？更好用。

抱歉 JayMee，现在收到此错误：TypeError: undefined is not an object (evalating 'owl.addItem')，也许是我的错？它也打破了旋转木马

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

no nothing.. :( 再次删除代码使其正常工作，没有错误。我只是将您的代码直接粘贴在现有代码之后但在我的最终代码之前 );并且不包括您的最终 ); （如果重要的话）

让我们continue this discussion in chat.

【参考方案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。希望这可以消除您的实现混乱。

【讨论】：

非常感谢您花时间解释这一点。关于发生的方式和发生的事情要清楚得多，但是在尝试添加到我的代码时仍然会出错。我想我对要添加哪些功能以及是否正在制作新功能感到困惑。我已经设置了一个 Fiddle，想知道你是否能够告诉我它应该如何阅读。当我将它们拆分为两个过滤器时，您将看到有两个功能。它不是一个完全工作的小提琴，只是主要部分。谢谢 - jsfiddle.net/agwmdefx

您似乎还没有完全掌握 JavaScript 中作用域的概念。 jQuery 使用 document ready 函数在 DOM 准备好后立即执行 js 代码。但是您的代码不必在文档就绪函数中。 js 文件顶层的代码将在加载到页面时立即执行。长话短说，您应该在每一页上只有一个文档就绪功能，并且您应该在顶层声明您的过滤器功能。我会编辑你的小提琴来表达我的意思。

我尝试使用不同的函数示例和 cmets 来解决问题。如果还有什么令人困惑的地方，请告诉我：jsfiddle.net/o8jd6xnq/2

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

【讨论】：

救命稻草。搜索了几个小时。我的问题是 Angular js 哈希更新 url 有一些延迟，并且活动菜单类正在正确的菜单上设置。$(window).on('hashchange',filterByHash);真的有帮助