我正在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/