Javascript html元素表单的条件显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3961422/
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
conditional display of html element forms
提问by Alvaro
Well, after a one hour introduction to javascript, I ve come up with the following code. It did what I wanted alright, but then I wanted something else and it wont work.
好吧，在对 javascript 进行了一个小时的介绍之后，我想出了以下代码。它做了我想做的事，但后来我想要别的东西，但它不起作用。
I wanted that upon clicking on a button, a certain field would hide and on clicking on another yes, another one would hide too, BUT, of course, it had to make the other show, otherwise we would end up with nothing and the purpose was to present different fields depending on what the user clicked (on a radio button) So in a childish way I made my code and it worked. But then it came to me that I wanted first to have boths fields hidden instead of both fields shown, and here is the issue. I added a 0 value to the parameter of the function "telling it" that when x = 0, then visibility = hidden. But it wont listen to me!, So, the part of the code when it says x = 1 and 2 works, the one about 0, does not.
我希望在点击一个按钮时，某个字段会隐藏，点击另一个是，另一个也会隐藏，但是，当然，它必须让另一个显示，否则我们最终将一无所获和目的是根据用户单击的内容（在单选按钮上）呈现不同的字段 所以我以一种幼稚的方式编写了代码并且它起作用了。但是后来我想到我想首先隐藏两个字段而不是显示两个字段，这就是问题所在。我在“告诉它”函数的参数中添加了一个 0 值，当 x = 0 时，可见性 = hidden。但它不会听我的！，所以，当它说 x = 1 和 2 工作时的代码部分，关于 0 的那部分，没有。
It is such a simple code that can make someone smile, but heck, it was clean and it worked. Does anyone know how to have the fields hidden before clicking on the buttons ?
这是一个简单的代码，可以让人微笑，但见鬼，它很干净而且有效。有谁知道如何在单击按钮之前隐藏字段？
Thanks a lot I remove some tags of the HTML
非常感谢我删除了 HTML 的一些标签
<html>
<head>
<script language="javascript">
var x = 0;
function hola(x) {
if(x == 0) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="hidden";
}
if(x == 1) {
document.getElementById("cont1").style.visibility="visible";
document.getElementById("cont2").style.visibility="hidden";
}
if(x == 2) {
document.getElementById("cont1").style.visibility="hidden";
document.getElementById("cont2").style.visibility="visible";
}
}
</script>
</head>
<body>
<input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
<div id="cont1">
<input type="text">
</div>
<input type="button" onclick="hola(2)" value="hidefield1" id="boton2">
<div id="cont2">
<input type="text">
</div>
</body>
<html>
回答by Nivas
What worked:
什么工作：
You had two buttons, both visible in the beginning. And on click of one button, you hid a div, and made another visible.
你有两个按钮，在开始时都是可见的。单击一个按钮，您隐藏了一个div，并使另一个可见。
Now you need a situation when the divs should be hidden in the beginning, and then show when you click a button.
现在你需要一个 div 应该在开始时隐藏的情况，然后当你点击一个按钮时显示。
By default, for all elements where a explicit visibilityattribute is not given, visibilityis considered to be visible.
默认情况下，对于所有visibility没有给出显式属性的元素，都visibility被认为是visible。
To make the button invisible, you need to add visibility:hiddento the button.
要使按钮不可见，您需要添加visibility:hidden到按钮。
You can do it two ways:
您可以通过两种方式做到这一点：
In the code for the
divs, make then "invisible by default" by addingstyle='visibility:hidden'.Add another javascript function that is called on load of the page, and makes both the divs invisible:
function hideBoth() { document.getElementById("cont1").style.visibility="hidden"; document.getElementById("cont2").style.visibility="hidden"; }
在
divs的代码中，通过添加style='visibility:hidden'.添加另一个在页面加载时调用的 javascript 函数，并使两个 div 不可见：
function hideBoth() { document.getElementById("cont1").style.visibility="hidden"; document.getElementById("cont2").style.visibility="hidden"; }
Call it on load of your page: <body onload='hideBoth()'>
在页面加载时调用它： <body onload='hideBoth()'>
回答by Gabriel McAdams
This line:
这一行：
document.getElementById("cont1").style.visibility="hidden";
Adds this:
添加这个：
style="visibility: hidden;"
to this:
对此：
<div id="cont1">
to make it look like this:
使它看起来像这样：
<div id="cont1" style="visibility: hidden;">
You can do this yourself, just by adding that attribute to your html tag.
您可以自己执行此操作，只需将该属性添加到您的 html 标记即可。
Oh yeah, and this:
哦，是的，还有这个：
<div id="cont1">
is the same as this:
与此相同：
<div id="cont1" style="visibility: visible;">
回答by Gabriel McAdams
You can use jquery to also do this! Here is an example which basically takes the input of your CSS and makes it visible or not:
您也可以使用 jquery 来做到这一点！这是一个示例，它基本上接受 CSS 的输入并使其可见或不可见：
function checkPrerequisites() {
// The 4th line makes objects visible in the for loop.
// Determines if pre-requisites are met and if so - makes div draggable
// for new courses
for (var i = 0; i < courselist.length; i++) {
if (prerequisitesMet(i)) {
$('#' + i.toString()).css("background-color", "lightgreen");
$('#' + i.toString()).css("visibility", "visible");
$('#' + i.toString()).draggable();
}
}
}
