对于挑战,我需要创建一个按钮,在华氏度和摄氏度之间切换。 问题是它适用于华氏温度并且回到摄氏温度然后停止。我希望用户能够根据需要来回切换,我找不到解决方案吗?
$("document").ready(function() {
// Declaring global variables
var latitude, longitude;
// Getting the location to be shared in the weather API / Display on Page
function getCurrentLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
// Getting exact location by passing Lat Long to Google Maps API
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," + longitude + "&key=AIzaSyBBP3PtbN3vugWmPEia1aYeKNLP8_-VDck", function(json) {
console.log(JSON.stringify(json, null, 2));
$("#currentLocation").html(json.results[2].formatted_address);
// Getting exact Weather conditions by passing the Lat/Long to freeCodeCamp Weather API
$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude, function(weatherJSON) {
$("#currentWeather").html(weatherJSON.weather[0].main + ", " + weatherJSON.weather[0].description);
$("#weatherIcon").attr("src", weatherJSON.weather[0].icon);
$("#currentTemp").html(weatherJSON.main.temp + " C°");
console.log(JSON.stringify(weatherJSON, null, 2));
// Converting Celsius to Farenheit
$(".btn").on("click", function setToF() {
var fahrenheit = (weatherJSON.main.temp * 9/5) + 32;
$("#currentTemp").html(fahrenheit + " F°");
$(".btn").html("Celsius");
if(weatherJSON.main.temp !== fahrenheit) {
$(".btn").on("click", function() {
$("#currentTemp").html(weatherJSON.main.temp + " C°");
$(".btn").html("Fahrenheit");
})
}
});
});
});
});
};
}
getCurrentLocation();
});
https://codepen.io/HacNass/full/ZrVOdX/
提前感谢您的帮助!
答案 0 :(得分:1)
您可以保存当前的温度单位,并在每次必须决定从一个单位转换为另一个单位时参考它。
weatherJSON.main.tempUnit = "C";
答案 1 :(得分:0)
只需使用$('#currentTemp').html()
即可获得设定值(温度)。
$("document").ready(function() {
// Declaring global variables
var latitude, longitude;
// Getting the location to be shared in the weather API / Display on Page
function getCurrentLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
// Getting exact location by passing Lat Long to Google Maps API
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," + longitude + "&key=AIzaSyBBP3PtbN3vugWmPEia1aYeKNLP8_-VDck", function(json) {
console.log(JSON.stringify(json, null, 2));
$("#currentLocation").html(json.results[2].formatted_address);
// Getting exact Weather conditions by passing the Lat/Long to freeCodeCamp Weather API
$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude, function(weatherJSON) {
$("#currentWeather").html(weatherJSON.weather[0].main + ", " + weatherJSON.weather[0].description);
$("#weatherIcon").attr("src", weatherJSON.weather[0].icon);
$("#currentTemp").html(weatherJSON.main.temp + " C°");
console.log(JSON.stringify(weatherJSON, null, 2));
});
});
});
};
}
getCurrentLocation();
// Converting Celsius to Farenheit
$(".btn").on("click", function() {
var $temp = $("#currentTemp");
var $tempVal = $temp.html().replace(' F°','');
var $tempVal = $tempVal.replace(' C°','');
var $tempVal = parseInt($tempVal);
if($temp.data('temp') != 'F'){
var fahrenheit = ($tempVal * 9/5) + 32;
$temp.html(fahrenheit + " F°").data('temp', 'F');
$(".btn").html("Celsius");
}else{
var celcius = ($tempVal-32) * 5/9;
$temp.html(celcius + " C°").data('temp', 'C');
$(".btn").html("Fahrenheit");
}
});
});
答案 2 :(得分:0)
从那里获取.BTN点击处理程序。将其包装在函数中并将weatherJSON.main.temp作为参数传递(如果存在且未定义)。然后它会正常工作。