Javascript 根据if语句显示div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8317958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show div based on if statement
提问by user1072100
I'm trying to use this code to hide or show a div based on the url param "direction" I can't get this to work and wonder if there is a better way. Sample url = http://domain.com?direction=south&season=summer- Thanks
我正在尝试使用此代码隐藏或显示基于 url 参数“方向”的 div 我无法让它工作，想知道是否有更好的方法。示例网址 = http://domain.com?direction=south&season=summer- 谢谢
<head>
<script type="text/javascript">
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.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;
}
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
}else {
document.getElementById('south').style.display = 'none';
}
</script>
</head>
<body>
<div id="north">Some text</div>
<div id="south">Some text</div>
</body>
回答by ipr101
You're missing a $(document).ready(if you're using jQuery) or window.onloadblock -
您缺少一个$(document).ready（如果您使用 jQuery）或window.onload块 -
$(document).ready(function() {
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
}else {
document.getElementById('south').style.display = 'none';
}
});
or without jQuery -
或没有 jQuery -
window.onload = function() {
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
}else {
document.getElementById('south').style.display = 'none';
}
}
It's possible that your code isn't working as the divs haven't been loaded in to the DOM when you're trying to show/hide them.
当您尝试显示/隐藏它们时，您的代码可能无法正常工作，因为 div 尚未加载到 DOM 中。
Example : http://jsfiddle.net/manseuk/RTrgN/1/
回答by Jon Erickson
Maybe in the if/else statement you need to show and hide the other div so that the correct one is shown and the correct one is hidden in each condition?
也许在 if/else 语句中，您需要显示和隐藏另一个 div，以便显示正确的 div，并在每个条件中隐藏正确的 div？
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
document.getElementById('south').style.display = 'none';
}else {
document.getElementById('north').style.display = 'none';
document.getElementById('south').style.display = 'block';
}
回答by Manse
For a pure javascript method you need to add change the window.onload even to run your code - this ensures the DOM elements are present to run your code :
对于纯 javascript 方法，您甚至需要添加更改 window.onload 才能运行您的代码 - 这可确保存在 DOM 元素以运行您的代码：
http://jsfiddle.net/manseuk/RTrgN/2/
http://jsfiddle.net/manseuk/RTrgN/2/
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.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;
}
function runMe() {
var myVal = getUrlVars()["direction"];
if (myVal == "north") {
document.getElementById('north').style.display = 'block';
} else {
document.getElementById('south').style.display = 'none';
};
}
window.onload = runMe; // run the code once the DOM is loaded
回答by CrashCodes
create a function, and assign it to the body's onload event. Also fix the styles from the if a bit.
创建一个函数，并将其分配给主体的 onload 事件。也修复一下 if 的样式。
<head>
<script type="text/javascript">
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.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;
}
function myOnLoad()
{
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
document.getElementById('south').style.display = 'none';
}else {
document.getElementById('north').style.display = 'none';
document.getElementById('south').style.display = 'block';
}
}
</script>
</head>
<body onload="myOnLoad()">
<div id="north">Some text</div>
<div id="south">Some text</div>
</body>
