📞 09318539889 📧 yxp@gansuwangzhan.cn

筛选传参(一)

作者:杨锦龙时间:2026-05-22点击量:0次

方案一:直接传递所有参数(最直观)

在模板循环中,直接将所有变量作为参数传给 checkUrl 方法。在 JS 函数内部判断哪些参数有值,再进行拼接。

HTML 模板部分:

<!-- 全部按钮 -->
<a class="{if !$level_id}on{/if}" href="javascript:void(0);" onclick="checkUrl({$level_id}, '{$status}', '{$city}', '{$county}')">全部</a>

{volist name="levelList" id="vo"}
<!-- 循环内的按钮,传入动态的 vo.id -->
<a class="{if $level_id==$vo.id}on{/if}" href="javascript:void(0);" onclick="checkUrl({$vo.id}, '{$status}', '{$city}', '{$county}')">{$vo.name}</a>
{/volist}

JS 方法部分:

function checkUrl(level_id, status, city, county) {
    // 基础链接
    let url = "{$column.url}"; 
    let params = [];

    // 只有当 level_id 有值时才拼接(如果是“全部”按钮,level_id 可能是 0 或空,根据实际需求调整判断条件)
    if (level_id) {
        params.push("level_id=" + level_id);
    }
    // 判断其他参数,不为空则放入传值
    if (status && status.trim() !== '') {
        params.push("status=" + encodeURIComponent(status));
    }
    if (city && city.trim() !== '') {
        params.push("city=" + encodeURIComponent(city));
    }
    if (county && county.trim() !== '') {
        params.push("county=" + encodeURIComponent(county));
    }

    // 拼接最终的 URL 并进行页面跳转
    if (params.length > 0) {
        url += "?" + params.join("&");
    }
    window.location.href = url;
}

方案二:利用 HTML 属性传值(代码更整洁,推荐)

如果参数很多,写在 onclick 里会非常长。我们可以把参数存在 HTML 标签的 data- 属性中,点击时通过 JS 获取当前点击元素的属性值来拼接。

HTML 模板部分:

<!-- 全部按钮 -->
<a class="{if !$level_id}on{/if}" href="javascript:void(0);" 
   data-level_id="" 
   data-status="{$status}" 
   data-city="{$city}" 
   data-county="{$county}" 
   onclick="checkUrl(this)">全部</a>

{volist name="levelList" id="vo"}
<!-- 循环内的按钮 -->
<a class="{if $level_id==$vo.id}on{/if}" href="javascript:void(0);" 
   data-level_id="{$vo.id}" 
   data-status="{$status}" 
   data-city="{$city}" 
   data-county="{$county}" 
   onclick="checkUrl(this)">{$vo.name}</a>
{/volist}

JS 方法部分:

function checkUrl(element) {
    // 获取当前点击元素的 data 属性
    let level_id = element.getAttribute('data-level_id');
    let status = element.getAttribute('data-status');
    let city = element.getAttribute('data-city');
    let county = element.getAttribute('data-county');

    let url = "{$column.url}";
    let params = [];

    // 统一判断并拼接参数
    if (level_id) params.push("level_id=" + level_id);
    if (status && status.trim() !== '') params.push("status=" + encodeURIComponent(status));
    if (city && city.trim() !== '') params.push("city=" + encodeURIComponent(city));
    if (county && county.trim() !== '') params.push("county=" + encodeURIComponent(county));

    if (params.length > 0) {
        url += "?" + params.join("&");
    }
    window.location.href = url;
}