Question

我正在使用WordPress网站中的一个事件页面，该页面使用一组过滤器来查询帖子;过滤器的标记如下：

<div class="event-filter">
    <a href="/events">All Events</a>
    <a href="/events?event-type=conference">Conferences</a>
    <a href="/events?event-type=webinar">Webinars</a>
    <a href="/events?event-type=learning">Learning</a>
    <a href="/past-events/">Past Events</a>
</div>

我正在使用jQuery将active类添加到当前正在使用的过滤器中，其简单代码如下：

$('.event-filter a').each(function() {
    if (this.href == window.location.href) {
        $(this).addClass("active");
    }
});

这种方法完全正常，除非结果帖子是分页的，因为网址会更改以反映当前页面，即/events/page/2/?event-type=conference。如果URL 包含相应的active术语但是也会占用“所有事件”，我如何修改我的JS以将event-type类添加到当前过滤器，从而附加当其他过滤器未使用时，该类为“所有事件”？一些注意事项：“过去的事件”选项只链接到一个存档页面，该页面是与可过滤的主要“事件”页面分开的模板;另外，这些过滤器不使用Ajax，它们只是通过URL参数改变WordPress查询。感谢您的任何见解！

Answer 1

从它的外观来看，你必须做两部分检查，我会尝试类似的事情：

$('.event-filter a').each(function() {
    var currentHref = window.location.href.split('?'); // ['https://myexamplesite.com/events/page/2', 'event-type=conference']
    var thisHref = this.href.split('?'); // ['https://myexamplesite.com/events', 'event-type=conference']
    var currentHrefHasQuery = currentHref.length > 1 ? true : false; // true
    var thisHrefHasQuery = thisHref.length > 1 ? true : false; //true

    if (currentHrefHasQuery != thisHrefHasQuery) {
        return; // they don't match
    }

    if (currentHrefHasQuery && currentHref[1] == thisHref[1]) { // if they have a query and the query is the same, it's a match!
        $(this).addClass("active");
    } else if (!currentHrefHasQuery && currentHref[0].indexOf(thisHref[0]) > -1) { //check to see if the current href contains this' href
        $(this).addClass("active");
    }
});

这绝对可以简化，但希望这很容易阅读。

小提琴：https://jsfiddle.net/m0hf3sfL/

jQuery：添加类来过滤包含活动术语的项目，计算分页

1 个答案: