Question

我正在使用JavaScript创建基于文本的RPG。我希望在进行特定输入时隐藏并显示<p>元素。

当＆＃34; 1＆＃34;按下，我想在右上角创建一个<p>元素，上面写着＆＃34;获取手铐的钥匙＆＃34; - 像提醒一样。

以下是与囚犯交谈的代码。在你与他交谈后，你应该得到这个提醒。

else if (input == "1") {
    if (currentroom == "interrogation" && guarddead3 == true) {
        $('<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>').insertBefore("#placeholder").fadeIn(1000);
    } else {
        $('<p>What do you mean?.</p>').insertBefore("#placeholder").fadeIn(1000);
        $("#container").fadeOut(3000, function() {
            $("#killed_guard").fadeIn(3000);
        });
    }
}

编辑：

HTML: 
<div id="placeholder"></div>
</div>
<!--
INPUT
-->
<form onsubmit="return false;">
<center><input type="text" id="command_line" size="50" autofocus="autofocus" /></center>
</form>
</div>


CSS:

#container {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -400px;
}



#console {
    background-color:black; 
    height: 400px; 
    width: 800px; 
    margin: 0 auto;
    overflow: auto;
    color: white;
}

#console p {
    color: white;
    display: none;
    font-size: 17px;
    font-family: "Times New Roman", Times, serif;
}

Answer 1

您可以使用CSS样式display: none;隐藏元素，而不将其从文档中删除。

将以下带有p.hidden选择器的CSS样式添加到HTML文件或外部样式表中。

<style>
   p.hidden {
      display: none;
   }
</style>

在您的HTML文件中，您可以将Class="hidden"设置为您不想显示的所有<p>元素。

<h1>This is a visible heading</h1>
   <p> class="hidden">text here will not be displayed</p>

Answer 2

要达到预期效果，请使用以下

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

$(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

使用javascript隐藏和显示<p>元素

2 个答案: