满足特定 URL 参数时显示 <div>答案

【问题标题】：Show <div> when a specific URL Parameter is met满足特定 URL 参数时显示 <div>
【发布时间】：2021-06-15 17:29:35
【问题描述】：

我在 Google 表格中有一个表单，它将 URL 参数传递给页面，然后该页面应根据 URL 参数显示内容。

因此，如果有人在 Google Sheet 中检查“item 1”和“item 2”，参数将按如下方式传递：

https://my-url.com/?item1=value1&item2=value2

现在有几个 div 容器，使用 css 设置为 display:none。当满足 URL 参数时，隐藏的 div 容器应该会显示出来。所以html是：

<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>

我在网上找到了一些代码，几乎可以做到这一点，但一次只能显示一个 div：https://jennamolby.com/how-to-display-dynamic-content-on-a-page-using-url-parameters/

我的问题是，对于每个传递的参数，都必须显示一个字段。

谁能帮我解决这个问题？无论如何，我真的不是 js 专家。

【问题讨论】：

只复制相关部分？它使用var dynamicContent = getParameterByName('dc'); 将一个特定参数的值分配给一个特定变量 - 所以重复吗？然后复制其余的逻辑，显示/隐藏一个特定的 div，基于这个变量，以及......

标签： javascript jquery url-parameters dynamic-content

【解决方案1】：

你可以这样做：

$.each(getUrlVars(), function(i, x) {
  $('#' + x).show();
})

function getUrlVars() {
  var vars = {},
    hash;
  var hashes = url.slice(url.indexOf('?') + 1).split('&');
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    //vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}

getUrlVars 取自 answer，并稍作修改。

演示

var url = "https://my-url.com/?item1=value1&item2=value2"; //replace with window.location.href
$.each(getUrlVars(), function(i, x) {
  $('#' + x).show();
})



function getUrlVars() {
  var vars = {},
    hash;
  var hashes = url.slice(url.indexOf('?') + 1).split('&');
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    //vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>

【讨论】：

【解决方案2】：

祝你好运

function getParameterByName(name, 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 item1 = getParameterByName('item1');
var item2 = getParameterByName('item2');

if (item1 == "value1")
{
  document.getElementById("value1").style.display = "block";
}
if (item2 == "value2")
{
  document.getElementById("value2").style.display = "block";
}

.hidden
{
  display: none;
}

<div class="hidden" id="value1">This content should show, when the URL parameter value 1 is passed</div>
<div class="hidden" id="value2">This content should show, when the URL parameter value 2 is passed</div>

【讨论】：

【解决方案3】：

试试这个

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
    return false;
};
let item1 = getUrlParameter('item1');
let item2 = getUrlParameter('item2');
if(item1 =='value1' &&item2 =='value2')
{
 document.getElementById('showhide').style.display = 'block';   
}

<div id="showhide" style="display: none">

hi hi
</div>

【讨论】：