我正在从事 freeCodeCamp“显示本地天气”项目。我几乎所有的东西都在工作，除了我似乎无法在华氏温度和摄氏温度之间切换以正常工作。这是一个显示天气的非常基本的页面，我希望用户能够通过单击标签在华氏度和摄氏度之间切换，然后页面将更新为新温度。目前，当我点击“C”标签时，它会短暂显示正确的温度，但随后会迅速切换回华氏温度。任何帮助将不胜感激。这是页面的链接:https://codepen.io/spencerj171/full/yzmmvR/
提前感谢大家!
HTML
<body>
<div class="container weather">
<div id="location"></div>
<div class="row">
<div class="col-lg-6">
<br><br>
<span class="ftemp" id="currentTemp"></span>
<span id="forc"><a href="" class="switch" id="f"> F</a> | <a href="" class="switch" id="c">C</a></span>
<div>
<span id="icon"></span>
<span id="description"></span>
</div>
<span class="ftemp" id="lowTemp"></span>
<span class="ftemp" id="highTemp"></span>
<div id="humidity"></div>
</div>
<div class="col-lg-6">
<div id="map"></div>
</div>
</div>
</body>
CSS
body{
background-color: rgb(152, 157, 165);
color: black;
}
.switch{
border: none;
background-color: rgb(255, 255, 255);
text-decoration: none;
}
.weather{
text-align: center;
margin-top: 100px;
background-color: rgb(255, 255, 255);
border-radius: 5px;
padding: 50px 50px 50px 50px;
width: 50%;
height: auto;
position: relative;
}
#location{
font-size: 2em;
padding-bottom: .5em;
}
#currentTemp{
font-size: 1.5em;
display: inline-block;
}
#forc{
color: black;
display: inline-block;
font-size: 1em;
}
#icon{
width: 100%;
height: auto;
}
#description{
display: inline-block;
}
#lowTemp{
display: inline-block;
padding-right: 10px;
}
#highTemp{
display: inline-block;
}
#humidity{
}
#map{
width: 100%;;
height: 300px;
margin: auto;
}
a.switch{
text-decoration: none;
color: black;
}
a:hover{
color: rgb(0, 182, 255);
}
JavaScript
var url = "https://api.openweathermap.org/data/2.5/weather?q=cleveland&appid=d32fada3b37530ca403693700ae6c134";
var gurl = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCrBes2R9nOEvbMHMoJ4oCTzSNGaOD6eQc&callback=initMap";
var degree = '<span id="forc"><a href="" class="switch" id="f"> F</a> | <a href="" class="switch" id="c">C</a></span>';
var apiOpen = "d32fada3b37530ca403693700ae6c134";
var map;
var tempSwitch = false;
$(document).ready(function(){
getLocation();
});
//Get location of user
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
getWeather();
initMap();
});
} else{
alert("Please allow location services.")
}
}
//Retrieve weather
function getWeather(){
data = $.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
success: function(json){
current = fahrenheit(json.main.temp);
low = fahrenheit(json.main.temp_min);
high = fahrenheit(json.main.temp_max);
$("#location").html("<div id='location'>" + json.name + " Weather</div>");
$("#currentTemp").html("<span class='ftemp' id='currentTemp'>" + current + "°" + "</span>");
$("#icon").html("<span id='icon'><img src='https://openweathermap.org/img/w/" + json.weather[0].icon + ".png'></span>");
$("#description").html("<span id='description'>" + json.weather[0].description.toUpperCase()) +"</span>";
$("#lowTemp").html("<span class='ftemp' id='lowTemp'>↓ " + low + "° " + "</span>");
$("#highTemp").html("<span class='ftemp' id='highTemp'>↑ " + high + "° " + "</span>");
$("#humidity").html("<div id='humidity'>Humidity: " + json.main.humidity + "%</div>");
}
});
switchTemp();
}
//Create Map
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.505493, lng: -81.681290},
zoom: 10
});
}
//Convert temperature
function fahrenheit(kel){
var f = Math.floor(9/5 * (kel - 273) + 32);
return f;
}
function fahr(c){
var fahr = Math.floor( c * 1.8 + 32);
return fahr;
}
function celsius(f){
var c = Math.floor((f - 32) * 5/9);
return c;
}
//Switch temperature
function switchTemp(){
$("#c").on("click", function(){
if(tempSwitch === false){
$("#currentTemp").html("<span id='currentTemp'>" + celsius(current) + "°" + "</span>");
$("#lowTemp").html("<span id='lowTemp'>↓ " + celsius(low) + "° " + "</span>");
$("#highTemp").html("<spanid='highTemp'>↑ " + celsius(high) + "° " + "</span>");
tempSwitch === true;
}
});
$("#f").on("click", function(){
if(tempSwitch === true){
$("#currentTemp").html("<span id='currentTemp'>" + fahr(current) + "°" + "</span>");
$("#lowTemp").html("<span id='lowTemp'>↓ " + fahr(low) + "° " + "</span>");
$("#highTemp").html("<spanid='highTemp'>↑ " + fahr(high) + "° " + "</span>");
tempSwitch === false;
}
});
}
最佳答案
您的代码中有 2 个问题:
C 和 F 是一个链接，因此当您单击它时会刷新页面，因为您在 href="" 中没有任何内容.使用 href="#" 或 e.preventDefault();，如下例所示:
$("#f").on("click", function(e){
e.preventDefault();
});
您使用 === 来设置 tempSwitch，如 tempSwitch === false 但您只需要使用一个 = 如 tempSwitch = false
关于javascript - 无法获得在华氏温度和摄氏温度之间切换的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47143768/