Question

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

website.com/?product=11

如果产品参数 11 ，15或23

，则显示div 1（小工具1）

如果产品参数为33,35或41

，则显示div 2（窗口小部件2）

如果产品参数 11 ，50或60

，则显示div 3（小工具3）

请注意＆＃34; 11＆＃34;将触发Div 1和Div 3显示。

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

website.com/?product=widget1,widget3

这是针对产品推荐表单（Ninja Forms + Conditional Logic add-on）将用户发送到推荐页面＆＃34;使用基于表单输入设置的URL参数。此页面将包含每个包含我们的10个产品之一的div，但它只显示基于表单输出的URL参数推荐的产品。接受任何建议来实现这一目标。

Answer 1

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

1）从您的网址中读取“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;
}

样本

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。

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

1 个答案:

样本