我正在 JS 中开发一个简单的项目，该项目从 API 调用数据并返回到页面。还有一个“重置”按钮，可以将 API 调用重置回基线。我无法弄清楚如何重置元素。通常我会使用 CSS 类来完成此操作，但这一次，我将构建一个更大的作业，该作业将从用户 ID 调用 API。所以我想纯粹通过 JS/jQuery 来完成此操作，而不使用表单元素。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Vain</title>
</head>
<h1> Weather 4 Ever </h1>
<body class = "change">
<p class="prompt">Type in a US city to get temperature data!</p>
<form class="pure-form">
<input type="text" class="pure-input-rounded">
<button type="submit" class="pure-button">Search</button>
<button type="submit" class="reset-button">Reset</button>
</form>
<p id="forecast"></p>
<p class="date"></p>
</body>
</html>
CSS
html, body {
background-color: #5CBF94;
font-weight: 100;
color: #FFF;
}
h1, h2, h3, h4, h5, h6, p {
text-align: center;
font-weight: 100;
width: 100%;
}
h1 {
font-size: 3em;
}
.prompt {
font-size: 1.2em;
margin-top: 4em;
}
form {
color: #000;
width: 290px;
margin: 0 auto;
}
.date {
position: absolute;
bottom: 0;
text-align: center;
}
img {
margin: 0 auto;
}
JS
console.log("Script loaded")
"use strict";
(function() {
$('.pure-button').click(function(e) {
e.preventDefault()
console.log("click noticed")
$.ajax({
url: "https://api.openweathermap.org/data/2.5/weather?q=" + $('.pure-input-rounded').val() + ",US&appid=6549863730776a52fadf3fe935d5eecc&units=Imperial",
type: "GET",
success: function(data){
var temp = data.main.temp
var sky = data.weather[0].description
$('#forecast').text("The current temperature in " + $('.pure-input-rounded').val() + " is " + temp + " degrees Fahrenheit. It is currently " + sky + "." )
}
})
})
(".reset-button").onclick.reset() //this is the part that I need to figure out.
})();
CodePen 链接:https://codepen.io/anfperez/pen/NJzPoE
谁能给我指点一下吗？
最佳答案
为了删除输入值，您可以在 Jquery 中使用.val函数并给它一个参数 ''。
此外，为了提高性能，最好将 Jquery 元素存储在变量中，这样您就不必在每次执行操作(例如单击)时都使用 Jquery 来查找它们
console.log("Script loaded")
"use strict";
(function() {
var $inputElement = $('.pure-input-rounded');
var $forecastElement = $('#forecast');
$('.pure-button').click(function(e) {
e.preventDefault()
console.log("click noticed")
$.ajax({
// var city = $('.pure-input-rounded').val()
url: "https://api.openweathermap.org/data/2.5/weather?q=" + $inputElement.val() + ",US&appid=6549863730776a52fadf3fe935d5eecc&units=Imperial",
type: "GET",
success: function(data) {
console.log(data)
var temp = data.main.temp
var sky = data.weather[0].description
$forecastElement.text("The current temperature in " + $('.pure-input-rounded').val() + " is " + temp + " degrees Fahrenheit. It is currently " + sky + ".")
}
})
})
$(".reset-button").click(function() {
$inputElement.val('');
})
})();html,
body {
background-color: #5CBF94;
font-weight: 100;
color: #FFF;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
text-align: center;
font-weight: 100;
width: 100%;
}
h1 {
font-size: 3em;
}
.prompt {
font-size: 1.2em;
margin-top: 4em;
}
form {
color: #000;
width: 290px;
margin: 0 auto;
}
.date {
position: absolute;
bottom: 0;
text-align: center;
}
img {
margin: 0 auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Vain</title>
</head>
<h1> Weather 4 Ever </h1>
<body class="change">
<p class="prompt">Type in a US city to get temperature data!</p>
<form class="pure-form" onsubmit="event.preventDefault();">
<input type="text" class="pure-input-rounded">
<button type="submit" class="pure-button">Search</button>
<button type="button" class="reset-button">Reset</button>
</form>
<p id="forecast"></p>
<p class="date"></p>
</body>
</html>关于JavaScript/jQuery : Clearing data after an API call，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55212018/