筛选传参(一)
作者:杨锦龙时间: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;
}