jQuery 的 hide() 和 show() 的 JavaScript 等价物是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19222501/
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
What is the JavaScript equivalent of jQuery's hide() and show()?
提问by Francis Jessie S. Enriquez Jr.
I have a simple hide and show jQuery code and I want to ask if there is equivalent of this to JavaScript? Here's my code.
我有一个简单的隐藏和显示 jQuery 代码，我想问一下是否有与 JavaScript 等效的代码？这是我的代码。
$(document).ready(function() {
$("#myButton").hide();
$("#1").click(function() {
$("#myButton").show();
$("#myButton").click(function() {
$("#myButton").hide();
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />I have followed some codes from the comments below but they are not working:
我遵循了下面评论中的一些代码，但它们不起作用：
<script>
document.getElementById('myButton').style.display = 'none';
function selectOptionsupdated(select) {
document.getElementById('myButton').style.display = 'block';
}
</script>
<select onSelect="selectOptionsupdated(this)">
<option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton" />What I want is at first the button is hidden, and when I click the <option>tag "Science" the button appears and when I click the button, the button is hidden after it is being clicked. And what if there are more <option>tags?
我想要的是首先隐藏按钮，当我点击<option>标签“科学”时，按钮出现，当我点击按钮时，按钮在点击后隐藏。如果有更多<option>标签怎么办？
回答by Vinay Pratap Singh
this is simple
这很简单
document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide
add a onSelect="selectOptionsupdated(this)in your select
onSelect="selectOptionsupdated(this)在您的选择中添加一个
then
然后
function selectOptionsupdated(select){
//do your stuff here
}
回答by Abhidev
var myButton = document.getElementById('myButton');
//hide
myButton.style.display = 'none';
//show
myButton.style.display = 'block';
Updatefor your select tag..try this
更新您的选择标签..试试这个
html
html
<select id="list">
<option id="1">Science</option>
</select>
js
js
var list = document.getElementById('select');
list.addEventListener('change', listSelect, false);
function listSelect(){
var selected = list.options[list.selectedIndex].value;//Selected option value //hide
myButton.style.display = 'none';
//show
myButton.style.display = 'block';
}
回答by kondapaka
document.getElementById("button").style.visibility="visible|hidden|collapse|inherit";
