не могу понять jquery .show () и .hide (), я нуб очень запутался
Swift 4
func decodeHTML(string: String) -> String? {
var decodedString: String?
if let encodedData = string.data(using: .utf8) {
let attributedOptions: [NSAttributedString.DocumentReadingOptionKey : Any] = [
.documentType: NSAttributedString.DocumentType.html,
.characterEncoding: String.Encoding.utf8.rawValue
]
do {
decodedString = try NSAttributedString(data: encodedData, options: attributedOptions, documentAttributes: nil).string
} catch {
print("\(error.localizedDescription)")
}
}
return decodedString
}
4 ответа
3 вещи:
- Ваш HTML-код был искажен
- Вам нужно установить
display: noneна CSS для того, что вы хотите скрыть в начале [1110 ] Вам нужно вызвать fadeIn (или show) для элемента ПОСЛЕ того, как fadeOut (или hide) завершится, вы можете сделать это с помощью обещаний и функции обратного вызова 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>Несколько вещей:
Javascript чувствителен к регистру, поэтому true - это зарезервированное слово, True - нет. Таким образом, вместо var nameFormat = True, вы должны сделать: var nameFormat = true.
Затем вы говорите, что хотите спрятать div2 welcome2 и welcome2-0, но в своем коде javascript вы этого не делаете. Если вы хотите сделать это, сделайте следующее:
$("#welcome2").hide();
$("#welcome2-0").hide();
// or
$("#welcome2").fadeOut(100);
$("#welcome2-0").fadeOut(100);
Есть еще одна проблема в вашем блоке else: вы делаете nameFormat == false, который просто сравнивает, если nameFormat имеет значение false Если вы хотите присвоить false переменной nameFormat, сделайте это:
nameFormat = false;
Чтобы достичь того, что вы пытаетесь сделать, просто:
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, я сделал свой ответ с этим. В противном случае вы можете заменить fadeIn на show.
Что касается вашего кода CSS, попробуйте установить display: none; для тех элементов, которые должны быть скрыты при загрузке страницы.
Для получения дополнительной информации смотрите:
Включите .hide() в начале вашего кода JavaScript (чтобы он выполнялся в самом начале), который бы скрывал эти 2 элемента div.
Затем, когда кнопка нажата, используйте .show() , чтобы снова показать эти 2 деления.
Также, где у вас было nameFormat == false;, вам нужно изменить это на nameFormat = false;. == является оператором сравнения, поэтому он посмотрит на это и скажет «О nameFormat is not false» и будет двигаться дальше. Если вы хотите, чтобы nameFormat был ложным (что, я полагаю, вы сделали), вы должны использовать оператор присваивания (который равен =)
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>