javascript - 节目当满足特定的 URL 参数时
问题描述
我在 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参数/
我的问题是,对于每个传递的参数,必须显示一个字段。
谁能帮我这个?无论如何,我真的不是 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
取自this 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>
推荐阅读
- angular - Angular:HTTP GET 请求 - OPTIONS 405(不允许的方法)
- java - Java 套接字 Json
- java - 如何使用 mockito 模拟注入对象的属性
- javascript - Angular 7:NullInjectorError:PagerService 没有提供者
- html - 没有表格单元格和行高的垂直居中文本?
- microsoft-graph-api - Microsoft Graph API:通过多个字段使用 $search 进行查询
- mysql - Liquibase 将列默认值设置为 null
- javascript - Javascript 从 AD 容器更改名称格式
- json - 获取嵌套对象http地址
- c# - 平滑一系列服务器端的结果以返回更少的数据点 (.NET)