[英]Hide and show <p> element with javascript
I am creating a text based RPG with JavaScript. 我正在使用JavaScript创建基于文本的RPG。 I want to hide and show a
<p>
element when a specific input is made. 我想在进行特定输入时隐藏并显示
<p>
元素。
You can use the CSS style display: none;
您可以使用CSS样式
display: none;
to hide elements with out removing them from document. 隐藏元素而不将其从文档中删除。
Add the following CSS style with a selector of p.hidden
to your HTML file or an external style sheet. 将以下带有
p.hidden
选择器的CSS样式添加到HTML文件或外部样式表中。
<style>
p.hidden {
display: none;
}
</style>
In your HTML file you can set Class="hidden"
to all <p>
elements that you do not want to display. 在HTML文件中,您可以将
Class="hidden"
为所有不想显示的<p>
元素。
<h1>This is a visible heading</h1>
<p> class="hidden">text here will not be displayed</p>
To achieve your expected result, use below 为了达到预期的效果,请在下面使用
HTML: HTML:
<input type="text" maxlength="1">
<p>No, I dont want to kill you. Why are you here? <br>Prisoner: I dont know, I got captored. You need to help me. You need to find the key to the handcuffs. I am not sure where they are. </p>
JS JS
$(document).ready(function(){
$('input').keypress(function(e) {
if(e.keyCode == 13){
if($('input').val()=='1'){
$("p").toggle();
}else{
$("p").toggle();
}
}
});
});
http://codepen.io/nagasai/pen/Krkxdg http://codepen.io/nagasai/pen/Krkxdg
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.