无法弄清楚jquery .show（）和.hide（），即时消息很混乱

时间：2019-03-05 00:41:52

标签： javascript jquery html

我正在一个项目上，无法弄清楚如何隐藏我的welcome2和welcome2-0 html代码，然后一旦按下按钮，就显示该信息。我是jquery的新手，我很困惑，尝试查找此内容，但对如何解决此问题仍然一无所知。我非常感谢您的帮助或帮助，如果格式不正确，我们深表歉意。

var name ;
var nameFormat=true;
function submission() {
    var name = document.getElementById("textbox").value;
    if (name.length > 0) {
        alert("Welcome "+name);
        $("#name").fadeOut(1000);
        $("#welcome").fadeOut(1000);
        
       
       
       
        
    }
    else{
        nameFormat==false;
        alert("Please enter the name again");
    }

   

}
#welcome{
    top:30px;
    left: 30px;
    color: antiquewhite;
    border: 2px solid blue;
    background: blue;
    padding: 25px;
  
}

#name{
 
    top:30px;
    left: 500px;
    color: antiquewhite;
    background: blue;
    border: 25px solid blue;
}

body {
    background-color: lightblue;
  }
#welcome2{
    position: relative;
    top:30px;
    left: 30px;
    color: antiquewhite;
    border: 2px solid blue;
    background: blue;
    padding: 25px;
}
HTML


<html lang="en">
<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	
	<title>Welcome!</title>

	<link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>

<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id ="name"><b>Name:</b> 

<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()" >submit</button>
</p>



<div id="welcome2">Myanmar Trivia Quiz </div>
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>

</div>


</body>
<script src="includes/project.js"></script>
</html>

4 个答案:

答案 0 :(得分：1)

3件事：

  • 您的HTML格式不正确
  • 您需要在CSS上设置display: none 首先要隐藏的内容
  • 您需要致电fadeIn （或显示）在淡出（或隐藏）完成后的元素上， 可以使用promises和fadeIn回调函数做到这一点

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise http://api.jquery.com/fadein/ 

var name ;
var nameFormat=true;
function submission() {
    var name = document.getElementById("textbox").value;
    if (name.length > 0) {
        alert("Welcome "+name);
        fadeOutWelcome().then(() => fadeInWelcome());
    }
    else{
        nameFormat==false;
        alert("Please enter the name again");
    }
}

const fadeOutWelcome = () => {
  return new Promise((resolve, reject) => { 
      $("#name").fadeOut(1000, () => resolve());
      $("#welcome").fadeOut(1000);
  });
}

const fadeInWelcome = () => {
  $("#welcome2").fadeIn(1000);
  $("#welcome2-0").fadeIn(1000);
}
#welcome{
    top:30px;
    left: 30px;
    color: antiquewhite;
    border: 2px solid blue;
    background: blue;
    padding: 25px;
  
}

#name{
 
    top:30px;
    left: 500px;
    color: antiquewhite;
    background: blue;
    border: 25px solid blue;
}

body {
    background-color: lightblue;
  }
#welcome2{
  display: none;
    position: relative;
    top:30px;
    left: 30px;
    color: antiquewhite;
    border: 2px solid blue;
    background: blue;
    padding: 25px;
}
HTML


<html lang="en">
<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	
	<title>Welcome!</title>

	<link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>

<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id ="name"><b>Name:</b> 

<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()" >submit</button>
</p>
</div>


<div id="welcome2">Myanmar Trivia Quiz
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>

</div>


</body>
<script src="includes/project.js"></script>
</html>

答案 1 :(得分：0)

几件事：

JavaScript区分大小写，因此true是保留字，True不是。因此，您应该执行以下操作，而不是var nameFormat = True：var nameFormat = true。

然后，您是说要隐藏welcome2和welcome2-0 div，但是在您的JavaScript代码中您没有这样做。如果要这样做，请执行以下操作：

$("#welcome2").hide();
$("#welcome2-0").hide();
// or
$("#welcome2").fadeOut(100);
$("#welcome2-0").fadeOut(100);

else块中还有另一个问题：您正在做nameFormat == false，这只是在比较nameFormat为false时。如果要将false分配给nameFormat变量，请执行以下操作：

nameFormat = false;

答案 2 :(得分：0)

在您的JavaScript代码的开头添加.hide()（以便它在最开始执行），这将隐藏这2个div。

然后，当按下按钮时，使用.show()再次显示那两个div。

此外，在您有nameFormat == false;的地方，您需要将其更改为nameFormat = false;。 ==是比较运算符，因此它将查看并说出“哦，nameFormat不是假的” ，然后继续。如果要使nameFormat为false（我假设是这样），则必须使用赋值运算符（即=）

var name;
var nameFormat = true;
$("#welcome2").hide();
$("#welcome2-0").hide();


function submission() {
  var name = document.getElementById("textbox").value;
  if (name.length > 0) {
    alert("Welcome " + name);
    $("#name").fadeOut(1000);
    $("#welcome").fadeOut(1000);
    $("#welcome2").show();
    $("#welcome2-0").show();

  } else {
    nameFormat == false;
    alert("Please enter the name again");
  }



}
#welcome {
  top: 30px;
  left: 30px;
  color: antiquewhite;
  border: 2px solid blue;
  background: blue;
  padding: 25px;
}

#name {
  top: 30px;
  left: 500px;
  color: antiquewhite;
  background: blue;
  border: 25px solid blue;
}

body {
  background-color: lightblue;
}

#welcome2 {
  position: relative;
  top: 30px;
  left: 30px;
  color: antiquewhite;
  border: 2px solid blue;
  background: blue;
  padding: 25px;
}
HTML


<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Welcome!</title>

  <link rel="stylesheet" href="includes/styles1.css" type="text/css" media="screen" />
</head>

<p>

  <body>
    <div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
    <div id="name"><b>Name:</b>

      <input type="text" id="textbox">
      <button id=”myButton” type="button" onclick="submission()">submit</button>
</div>



<div id="welcome2">Myanmar Trivia Quiz </div>
<div id="welcome2-0">Test your Demographic Knowledge<br>--------------------------------------------------------------------------------------</div>

</div>


</body>
<script src="includes/project.js"></script>

</html>

答案 3 :(得分：0)

要实现您想做的事情，只需将其作为：

var name;
var nameFormat=true;
function submission() {
    name = document.getElementById("textbox").value;
    if (name.length > 0) {
        alert("Welcome "+name);
        $("#name").fadeOut(1000);
        $("#welcome").fadeOut(1000);
        $("#welcome2").fadeIn(1000);
        $("#welcome2-0").fadeIn(1000);        
    }
    else{
        nameFormat=false;
        alert("Please enter the name again");
    }
}

自从您出现在代码fadeOut中以来，我就这样回答了。否则，您可以将showIn替换为fadeIn。

关于CSS代码，请尝试为页面加载时应隐藏的那些元素设置display: none;。

有关更多信息，请查看：

http://api.jquery.com/show/

相关问题
最新问题