无法找出jQuery .show()和.hide()，我一个菜鸟非常困惑

我正在从事一个项目，无法弄清楚如何隐藏我的欢迎2和欢迎2-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>

3件：

您的HTML畸形
您需要在CSS上设置display: none对于您想隐藏在Start
您需要致电Fadein（或显示）在淡出（或hide）完成后的元素上，您可以使用承诺和Fadein回调功能

https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/promisehttp://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>

几件事：

javaScript对病例敏感，因此是一个保留的单词，true不是。因此，您应该做：var nameformat = true代替var nameformat = true。

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

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

您的其他块中还有另一个问题：您正在执行nameformat == false，这只是在比较nameformat是错误的。如果要为nameformat变量分配false，请执行此操作：

nameFormat = false;

在JavaScript代码开头（以便在一开始执行）将.hide()包含在该2个Divs上。

然后按下按钮时，使用.show()再次显示这2个divs。

另外，在您拥有nameFormat == false;的地方，您需要将其更改为nameFormat = false;。 ==是比较操作员，因此它会查看它，并说" oh nameformat不是false" ，然后继续前进。如果您想使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>

要实现您要做的事情，这只是：

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中，因此我对此做出了答案。否则您可以用Show替换Fadein。

关于您的CSS代码，尝试将display: none;设置为当页面加载时应该隐藏的元素。

有关更多信息，请查看：

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

相关内容

最新更新

热门标签：