day119-商城业务-检索服务-页面筛选条件渲染

最新推荐文章于 2024-05-20 09:35:39 发布

原创最新推荐文章于 2024-05-20 09:35:39 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#商城业务-检索服务 #页面筛选条件渲染

谷粒商城专栏收录该内容

150 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现网页中的品牌和属性筛选功能。通过修改超链接并定义`searchProducts`函数，当用户点击品牌或属性时，能够动态添加查询参数到URL，从而筛选出对应分类的产品。此方法适用于前端页面的数据过滤和搜索优化。

品牌超链接修改为如下

                                    <a th:href="${'javascript:searchProducts(&quot;brandId&quot;,'+brand.brandId+')'}">

属性超链接修改为如下

                                <a th:href="${'javascript:searchProducts(&quot;attrs&quot;,'+attrs.attrId+'_'+attrValue+')'}" th:text="${attrValue}">0-499</a></li>

js添加方法

    function searchProducts(name,value){
        debugger
        var href = location.href+"";
        if(href.includes("?")){
            location.href += '&'+name+'='+value
        }else{
            location.href += '?'+'&'+name+'='+value
        }
    }

测试效果如下，当我点击某分类时能筛选出该分类的产品,属性也是同理