基于URL参数实现页面多div显示/隐藏的技术方案咨询

我来给你一个灵活易维护的解决方案，完美适配你需要的多关联显示场景：

核心思路 #

我们可以把每个Widget的显示规则和对应的产品ID做映射，不管是一个产品ID对应多个Widget，还是一个Widget对应多个产品ID，都能轻松处理。这里提供两种实现方式，你可以根据自己的场景选择：

方式1：JS配置映射（推荐用于规则需要动态修改的场景） #

这种方式把显示规则集中放在JS对象里，后续修改或新增规则只需要更新这个对象，非常方便。

HTML结构

给每个Widget的div设置唯一ID和统一的类名，方便批量操作：

<div id="widget-1" class="widget">Widget 1</div>
<div id="widget-2" class="widget">Widget 2</div>
<div id="widget-3" class="widget">Widget 3</div>

JavaScript实现

// 定义每个Widget对应的产品ID数组
const widgetDisplayRules = {
  'widget-1': [11, 15, 23],
  'widget-2': [33, 35, 41],
  'widget-3': [11, 50, 60]
};

// 获取URL中的product参数
const urlParams = new URLSearchParams(window.location.search);
const productId = parseInt(urlParams.get('product'), 10);

// 先隐藏所有Widget
document.querySelectorAll('.widget').forEach(widget => {
  widget.style.display = 'none';
});

// 如果参数有效，显示符合规则的Widget
if (!isNaN(productId)) {
  // 遍历规则，找到所有需要显示的Widget
  Object.entries(widgetDisplayRules).forEach(([widgetId, allowedProductIds]) => {
    if (allowedProductIds.includes(productId)) {
      const targetWidget = document.getElementById(widgetId);
      if (targetWidget) {
        targetWidget.style.display = 'block'; // 可以换成你需要的显示方式，比如flex
      }
    }
  });
}

方式2：HTML数据属性（推荐用于规则固定、需要和DOM绑定的场景） #

这种方式把每个Widget对应的产品ID直接写在HTML的data-*属性里，规则一目了然，适合静态页面或后端渲染的场景。

HTML结构

<div class="widget" data-allowed-products="11,15,23">Widget 1</div>
<div class="widget" data-allowed-products="33,35,41">Widget 2</div>
<div class="widget" data-allowed-products="11,50,60">Widget 3</div>

JavaScript实现

// 获取URL中的product参数
const urlParams = new URLSearchParams(window.location.search);
const productId = parseInt(urlParams.get('product'), 10);

// 遍历所有Widget，根据data属性判断是否显示
document.querySelectorAll('.widget').forEach(widget => {
  // 把data属性里的字符串转成数字数组
  const allowedIds = widget.dataset.allowedProducts.split(',').map(Number);
  // 根据是否包含当前productID切换显示状态
  widget.style.display = allowedIds.includes(productId) ? 'block' : 'none';
});

方案优势 #

• 完美支持多关联场景：比如product=11时，Widget1和Widget3会同时显示
• 可扩展性强：新增Widget或修改产品ID映射只需要修改配置/HTML，不需要改动核心逻辑
• 兼容性好：URLSearchParams支持所有现代浏览器，如果你需要兼容旧浏览器，可以用正则解析URL参数（比如window.location.search.match(/product=(\d+)/)）

内容的提问来源于stack exchange，提问作者the-coopersmith