jQuery：隐藏和显示输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11918397/
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
jQuery: hide and show an input element
提问by inrob
I'm trying to do is hiding/showing a certain input object if a select value is checked.
如果选中了选择值，我正在尝试隐藏/显示某个输入对象。
The HTML part of the code is here:
代码的 HTML 部分在这里：
<label for="add_fields_placeholder">Placeholder: </label>
<select name="add_fields_placeholder" id="add_fields_placeholder">
<option value="50">50</option>
<option value="100">100</option>
<option value="Other">Other</option>
</select>
<div id="add_fields_placeholderValue">
Price:
<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">
</div>?
And the jQuery part is here:
jQuery 部分在这里：
$(document).ready(function()
{
$("#add_fields_placeholder").change(function() {
if($(this).val() == "Other") {
$("#add_fields_placeholderValue").show();
}
else {
$("#add_fields_placeholderValue").hide();
}
});
});
? So if user selects "Other", it shows another input object.
? 因此，如果用户选择“其他”，则会显示另一个输入对象。
The problem now is this. First when you open the page the first option is selected by default and the optional input object is shown. It hides once you select another option.
现在的问题是这个。首先，当您打开页面时，默认情况下会选择第一个选项并显示可选的输入对象。一旦您选择另一个选项，它就会隐藏。
Is there any trick to make it hide when you first load the page too? Not just when you select a value manually.
当您第一次加载页面时，是否有任何技巧可以使其隐藏？不仅仅是当您手动选择一个值时。
Thank you guys.
谢谢你们。
回答by Travis J
Just add:
只需添加：
$("#add_fields_placeholderValue").hide();
After your change event declaration on page load.
在页面加载时更改事件声明之后。
i.e.
IE
$(document).ready(function()
{
$("#add_fields_placeholder").change(function()
{
if($(this).val() == "Other")
{
$("#add_fields_placeholderValue").show();
}
else
{
$("#add_fields_placeholderValue").hide();
}
});
$("#add_fields_placeholderValue").hide();
});
Working example: http://jsfiddle.net/bZXYR/
工作示例：http: //jsfiddle.net/bZXYR/
回答by Musa
You can use css to hide it initially
您可以使用 css 最初隐藏它
#add_fields_placeholderValue{display:none;}
Also you have multiple elements with the same id(pointed out by Brandon), which is not valid
此外，您有多个具有相同 id 的元素（由 Brandon 指出），这是无效的
回答by Brandon
You could simply do it with CSS:
你可以简单地用 CSS 来做到这一点：
Change the ID here:
在此处更改 ID：
<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">
since you already use it here
因为你已经在这里使用了
<div id="add_fields_placeholderValue">
and then add this css:
然后添加这个css：
#add_fields_placeholderValue {
display: none;
}?
回答by Craig Payne
if you change the anonymous method into a callable function, you should be able to call it on Ready()
如果将匿名方法更改为可调用函数，则应该可以在 Ready() 上调用它
e.g.
例如
$(document).ready(function () {
$("#add_fields_placeholder").change(ShowIfOther);
ShowIfOther();
});
function ShowIfOther() {
if ($("#add_fields_placeholder").val() == "Other") {
$("#add_fields_placeholderValue").show();
} else {
$("#add_fields_placeholderValue").hide();
}
}?
回答by Dave R.
Place the following code beneath the placeholder elements:
将以下代码放在占位符元素下方：
<script>$('#add_fields_placeholderValue').hide();</script>
Doing it in the ready handler may induce 'flashing' of the element in certain circumstances:
在某些情况下，在就绪处理程序中执行此操作可能会导致元素“闪烁”：
回答by Tuanderful
I typically factor out the hide/show logic:
我通常会考虑隐藏/显示逻辑：
function foobar(){
if($(this).val() == "Other"){
$("#add_fields_placeholderValue").show();
}
else{
$("#add_fields_placeholderValue").hide();
}
}
and call it when the page loads.
并在页面加载时调用它。
$(document).ready(function(){
foobar();
$("#add_fields_placeholder").change(function(){
foobar();
});
});
but i'd be curious to see what other folks usually do.
但我很想知道其他人通常会做什么。
