Wordpress - 如何创建指向数据过滤器元素的链接？答案

【问题标题】：Wordpress - How to create link to a data-filter element?Wordpress - 如何创建指向数据过滤器元素的链接？
【发布时间】：2019-09-10 01:51:24
【问题描述】：

我的 WordPress 网站的一个页面使用页面过滤器菜单，用户可以单击项目来过滤下面的帖子类型。有没有办法为每个过滤器菜单项创建一个链接，用户可以从该页面外部直接访问它们？请看下面的html代码：

<ul class="filter js-filter">
    <li class="active">
        <a href="#" data-filter="*">All</a>
    </li>
    <li class="">
        <a href="#" data-filter=".building">Building </a>
    </li>
    <li class="">
        <a href="#" data-filter=".villa">Villa </a>
    </li>
    <li class="">
        <a href="#" data-filter=".interior">Interior </a>
    </li>
    <li class="">
        <a href="#" data-filter=".exterior">Exterior </a>
    </li>
</ul>

【问题讨论】：

标签： html css wordpress

【解决方案1】：

最简单的方法可能是使用 jQuery 的 trigger() 来模拟基于 URL 片段（URL 中的哈希）的适当元素的点击

链接：

<a href="https://example.com/filter-page#*">Filter All</a>
<a href="https://example.com/filter-page#.building">Filter Buildings</a>

过滤器页面上的 JavaScript：

jQuery(document).ready(function($){
    var currentFilter = window.location.hash.substr(1);

    $('.js-filter [data-filter="'+ currentFilter +'"]').trigger('click');
});

【讨论】：