如何用JQuery实现分类/搜索跳转列表页并自动应用筛选？

完全可以通过JavaScript/jQuery实现跨页参数传递，核心思路是用URL查询字符串（Query String）传递筛选条件，然后在列表页加载时读取这些参数，自动调用Isotope的筛选方法。下面分步骤实现：

一、修改主页分类栏，传递分类参数 #

给每个分类的链接添加查询参数，把分类名称作为参数值传递到列表页：

<div class="main_categories">
 <div class="container">
                <ul class="clearfix">
                    <li>
                        <a href="grid-listings-filterscol.html?category=Λάδι">
                            <i class="fa-solid fa-bottle-droplet"></i>
                            <h3>Λάδι</h3>
                        </a>
                    </li>
                    <li>
                        <a href="grid-listings-filterscol.html?category=Φρούτα">
                            <i class="fa-solid fa-apple-whole"></i>
                            <h3>Φρούτα</h3>
                        </a>
                    </li>
                    <li>
                        <a href="grid-listings-filterscol.html?category=Λαχανικά">
                            <i class="fa-solid fa-seedling"></i>
                            <h3>Λαχανικά</h3>
                        </a>
                    </li>
                    <li>
                        <a href="grid-listings-filterscol.html?category=Μέλι">
                            <i class="fa-solid fa-jar"></i>
                            <h3>Μέλι</h3>
                        </a>
                    </li>
                    <li>
                        <a href="grid-listings-filterscol.html">
                            <i class="fa-solid fa-ellipsis"></i>
                            <h3>Περισσότερα</h3>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- /container -->
        </div>

二、修改搜索栏，传递多维度筛选参数 #

把表单的method改成GET（参数会拼在URL里，方便列表页读取），给每个输入/选择框添加name属性，确保参数能正确传递：

<section class="hero_single version_2">
            <div class="wrapper">
                <div class="container">
                    <h3>ΕΛΛΗΝΙΚΑ ΠΡΟΙΟΝΤΑ</h3>
                    <p>Ανακάλυψε τους καλύτεροις παραγωγούς φυσικών προιόντων στην Ελλάδα.</p>
                    <form method="GET" action="grid-listings-isotope.html">
                        <div class="row g-0 custom-search-input-2">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <input class="form-control" type="text" name="keyword" placeholder="Τι ψάχνεις...">
                                    <i class="icon_search"></i>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <select class="wide" name="region">
                                        <option value="">Όλες οι περιοχές</option>   
                                        <option value="Αττική">Αττική</option>
                                        <option value="Πελοπόννησος">Πελοπόννησος</option>
                                        <option value="Στερεά Ελλάδα">Στερεά Ελλάδα</option>
                                        <option value="Κρήτη">Κρήτη</option>
                                        <option value="Βόρεια Ελλάδα">Βόρεια Ελλάδα</option>
                                        <option value="Νησιά Αιγαίου">Νησιά Αιγαίου</option>
                                        <option value="Νησιά Ιονίου">Νησιά Ιονίου</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <select class="wide" name="category">
                                    <option value="">Όλες οι κατηγορίες</option> 
                                    <option value="Λάδι">Λάδι</option>
                                    <option value="Φρούτα">Φρούτα</option>
                                    <option value="Λαχανικά">Λαχανικά</option>
                                    <option value="Μέλι">Μέλι</option>
                                    <option value="Ζωοτροφές">Ζωοτροφές</option>
                                    <option value="Βιολογικά">Βιολογικά</option>
                                </select>
                            </div>
                            <div class="col-lg-2">
                                <input type="submit" value="Αναζήτηση">
                            </div>
                        </div>
                        <!-- /row -->
                    </form>
                </div>
            </div>
        </section>

三、修改列表页JS，读取URL参数并自动筛选 #

添加读取URL查询参数的工具函数，在页面加载时读取参数，组合筛选规则后自动触发Isotope筛选：

// 工具函数：读取URL查询参数
function getUrlParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
}

$(window).on('load', function(){
    var $container = $('.isotope-wrapper');
    $container.isotope({ 
        itemSelector: '.isotope-item', 
        layoutMode: 'masonry' 
    });

    // 读取URL中的筛选参数
    const keyword = getUrlParam('keyword');
    const region = getUrlParam('region');
    const category = getUrlParam('category');

    // 构建Isotope筛选选择器（需和你现有筛选规则匹配）
    let filterSelector = '*'; // 默认显示所有
    let filters = [];

    // 处理分类筛选（匹配你现有data-filter的格式）
    if (category && category !== '') {
        filters.push(`[data-filter*="${category}"]`);
    }

    // 处理地区筛选（匹配你现有location-filter的格式）
    if (region && region !== '') {
        filters.push(`[location-filter*="${region}"]`);
    }

    // 处理关键词筛选（需给列表项添加data-keyword属性存储关键词）
    if (keyword && keyword !== '') {
        $('.isotope-item').each(function() {
            const itemKeyword = $(this).attr('data-keyword').toLowerCase();
            if (!itemKeyword.includes(keyword.toLowerCase())) {
                $(this).addClass('hidden-by-keyword');
            }
        });
        filters.push(':not(.hidden-by-keyword)');
    }

    // 组合最终筛选器
    if (filters.length > 0) {
        filterSelector = filters.join('');
    }

    // 触发Isotope筛选
    $container.isotope({ filter: filterSelector });
});

// 保留原有筛选事件
$('.category_filter').on( 'click', 'input', 'change', function(){   
    var selector = $(this).attr('data-filter');   
    $('.isotope-wrapper').isotope({ filter: selector });  
}); 

$('.city_filter').on('click', 'input', 'change', function(){   
    var selector = $(this).attr('location-filter');   
    $('.isotope-wrapper').isotope({ filter: selector }); 
}); 

$('.filters_listing').on( 'click', 'input', 'change', function(){   
    var selector = $(this).attr('popular-filter');   
    $('.isotope-wrapper').isotope({ filter: selector }); 
});

关键说明： #

1. 确保列表项（.isotope-item）的属性和筛选规则匹配：比如分类筛选对应data-filter属性，地区筛选对应location-filter属性，关键词筛选需要添加data-keyword属性存储项目相关关键词。
2. 如果你的筛选规则是基于类名而非属性，只需调整filters.push()中的选择器格式即可，比如filters.push('.category-' + category.replace(/\s+/g, '-'))。

内容的提问来源于stack exchange，提问作者George Makrakis