根据url参数显示/隐藏页面上的多个div

Question

寻找一种显示多个div的方法，并根据URL参数隐藏其余的div。

website.com/?product=11

如果产品参数为11,15或23，则显示div 1（Widget 1）

如果产品参数为33,35或41，则显示div 2（Widget 2）

如果产品参数为11,50或60，则显示div 3（Widget 3）

注意“11”将如何触发Div 1和Div 3显示。

其他选项可能是为每个与每个产品模糊关联的div提供一个ID。这需要能够在URL中允许多个产品参数：

website.com/?product=widget1,widget3

这样做的目的是为产品推荐者表单（Ninja Forms + Conditional Logic add-on）将用户发送到“推荐页面”，其中URL参数根据表单输入设置。此页面将包含每个包含我们的10个产品之一的div，但它只显示基于表单输出的URL参数推荐的产品。打开任何建议来实现这一目标。

Answer 1

您可以通过三个简单的步骤实现所需的效果。

1）从您的URL中读取“product”参数：

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var product = getParameterByName("product", url);

2）将类添加到与该产品对应的HTML页面的正文中：

document.body.className += ' ' + 'product' + product;

3）像这样定义你的div的CSS：

.div1 {
   display : none;
} 

.product11 .div1, .product15 .div1, .product23 .div1 {
   display : block;
}

---

DEMO

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var url = "website.com/?product=11";
var product = getParameterByName("product", url);
document.body.className += ' ' + 'product' + product;

.div1, .div2, .div3 {
   display : none;
} 

.product11 .div1, .product15 .div1, .product23 .div1,
.product33 .div2, .product35 .div2, .product41 .div2,
.product11 .div3, .product50 .div3, .product60 .div3 {
   display : block;
}

<div class="div1">
  DIV1
</div>
<div class="div2">
  DIV2
</div>
<div class="div3">
  DIV3
</div>

另见this Fiddle。