$('.btn').on("click", function() {
var text = $(this).text();
$(this).text(text === 'Celsius' ? 'Fahrenheit' : 'Celsius');
changeUnits();
});
function changeUnits(Temp, c) {
if ($('.btn').text() === 'Celsius')
return Math.round((Temp - 273.15)*10)/10 + " °C";
else
return Math.round(((Temp* (9/5)) - 459.67)*10)/10 + " °F";
}
我正在尝试使用单击事件上的按钮来更改临时显示，但它似乎无法像这样工作。无论如何，该功能都会看到摄氏度。我也试过 $(this).html 。按钮的文本实际上正在改变，只是功能没有更新。我也尝试在单击按钮内运行更改单位功能，但它仍然没有更新。
我对这个 onclick 事件有什么不理解的，我该如何让它工作。
JS代码:
var apiKey = "get your own key from http://openweathermap.org";
function changeUnits(Temp, c) {
if ($('.btn').text() === 'Celsius')
return Math.round((Temp - 273.15)*10)/10 + " °C";
else
return Math.round(((Temp* (9/5)) - 459.67)*10)/10 + " °F";
}
$('.btn').on("click", function() {
var text = $(this).text();
$(this).text(text === 'Celsius' ? 'Fahrenheit' : 'Celsius');
changeUnits();
});
$(function() {
var loc;
//api call to get lat and long
$.getJSON('http://ipinfo.io', function(data) {
loc = data.loc.split(",");
//weather API call
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' +
loc[0] + '&lon=' + loc[1] + '&appid=' + apiKey,
function(weather) {
var currentLocation = weather.name;
var currentConditions = weather.weather[0].description;
var currentTemp = changeUnits(weather.main.temp);
var high = changeUnits(weather.main.temp_max);
var low = changeUnits(weather.main.temp_min);
var currentWind = weather.wind.speed;
var currentWdir = weather.wind.deg;
var sunRise = weather.sys.sunrise;
var sunSet = weather.sys.sunset;
var icon = weather.weather[0].icon;
//set HTML elements for weather info
$('#currentLocation').append(currentLocation);
$('#currentTemp').html(currentTemp);
$('#high-low').html('<span id="high">High: ' + high + '</span><br>'
+ '<span id="low">Low: ' + low + '</span>');
$('#currentConditions').html(currentConditions);
var iconSrc = "http://openweathermap.org./img/w/" + icon + ".png";
$('#currentConditions').prepend('Outside the current conditions are <br><img id="weatherImg"src="' + iconSrc + '"><br>');
});
});
});
HTML:
<html>
<head>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript,width=device-width,initial-scale=1">
<title></title>
</head>
<body>
<div id="header">
<div class="left"><h1 id="currentLocation">Your Current Location is </h1></div>
<div class="navbar"></div>
<div class="right"><a href="https://github.com/Maverick494"><i class="fa fa-github bigger_icon"></i></a></div>
</div>
<div id="container">
<h2 class="text-center content-title" id="currentTemp"></h2>
<div class="content-body text-center">
<p id="high-low"></p>
<button data-text-swap="Fahrenheit" id="unitButton" type="button" class="btn btn-success">Celsius</button>
<p id="currentConditions"></p>
</div>
</div>
</body>
</html>
我已经做了所有我能想到的改变。 onclick 中的 console.log(el.text()) 清楚地显示了文本的变化；但是当我在 onclick 期间再次运行该函数时，changeUnits 的函数似乎永远不会在 if 语句中获取它。
最佳答案
看起来您正在使用 html() 而不是 text()。我假设您正在寻找按钮文本而不是 html，所以试试这个:
$('.btn').on("click", function() {
$(this).text(function(f, c) {
return c === 'Celsius' ? 'Fahrenheit' : 'Celsius';
});
});
function changeUnits(Temp, c) {
if ($('.btn').text() === 'Celsius'){
return Math.round(Temp - 273.15) + " °C";
}else{
return Math.round((Temp* (9/5)) - 459.67) + " °F";
}
}
关于javascript - 单击时不更新函数的输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42584805/