我正在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");
    }
});


除非在结果分页中进行分页,否则此方法非常有效,因为URL会更改以反映当前页面,即/events/page/2/?event-type=conference。如果URL包含相应的active术语但又解释了“所有事件”,如何修改JS将event-type类添加到当前过滤器中,从而在其他过滤器时将类追加到“所有事件”没有使用?需要注意的是:“过去的事件”选项仅链接到存档页面,该页面是与可过滤的主要“事件”页面分开的模板;同样,这些过滤器未使用Ajax,它们只是通过URL参数更改WordPress查询。感谢您的任何见解!

最佳答案

从外观上,您将必须进行两部分检查,我将尝试执行以下操作:

$('.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/

关于javascript - jQuery:将类添加到包含有效术语的过滤器项中,以解决分页问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45571238/

10-12 03:58
查看更多