如何修改jQuery脚本仅当URL存在f=参数时才展示筛选器值

AI 小北

2026-10-7

解决方案

你可以直接使用以下修改后的脚本，核心新增了f参数的存在性判断，同时优化了URL参数的获取逻辑，避免参数顺序变化导致的取值错误：

$(document).ready(function(){
  // 从URL查询参数中获取f参数值，不受参数顺序影响
  const searchParams = new URLSearchParams(window.location.search);
  const rawFilter = searchParams.get('f');

  // 仅当筛选参数存在且不为空时，才追加文本到h1
  if (rawFilter && rawFilter.trim() !== '') {
    const decodedFilter = decodeURI(rawFilter);
    const $span = $('<span>').addClass('filter')
      // 如果需要中文显示，可替换为：` 位于${decodedFilter}中。`
      .text(` in ${decodedFilter}.`);
    $("h1").append($span);
  }
});

如果需要兼容不支持URLSearchParams的旧版浏览器，可以使用手动拆分参数的版本：

$(document).ready(function(){
  let decodedFilter = '';
  // 拆分所有查询参数遍历查找f参数
  const queryList = window.location.search.slice(1).split('&');
  for (let item of queryList) {
    if (item.startsWith('f=')) {
      decodedFilter = decodeURI(item.slice(2));
      break;
    }
  }

  if (decodedFilter && decodedFilter.trim() !== '') {
    const $span = $(document.createElement('span'));
    $span.addClass('filter');
    // 如果需要中文显示，可替换为：" 位于"+ decodedFilter +"中。"
    $span.text(" in "+ decodedFilter +".")
    $("h1").append($span);
  }
});