当满足特定 URL 参数时显示 <div>
Show <div> when a specific URL Parameter is met
我在 Google Sheet 中有一个表单,它将 URL 参数传递给页面,然后该页面应根据 URL 参数显示内容。
因此,如果有人在 Google Sheet 中检查“项目 1”和“项目 2”,则参数将按如下方式传递:
https://my-url.com/?item1=value1&item2=value2
现在有几个 div 个容器,它们设置为 display:none 和 css。当满足 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 专家。
你可以这样做:
$.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>
祝你好运
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>
试试这个
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>
我在 Google Sheet 中有一个表单,它将 URL 参数传递给页面,然后该页面应根据 URL 参数显示内容。
因此,如果有人在 Google Sheet 中检查“项目 1”和“项目 2”,则参数将按如下方式传递:
https://my-url.com/?item1=value1&item2=value2
现在有几个 div 个容器,它们设置为 display:none 和 css。当满足 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 专家。
你可以这样做:
$.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>
祝你好运
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>
试试这个
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>