0
Я работаю над приложением для небольшой погоды. Последнее, что я пытаюсь сделать, - сделать значок большой погоды щелчком мыши, чтобы переключить единицу ° между Фаренгейтом и Цельсием.Функция Javascript Click не работает
Мой код, кажется, ничего не делает. Я был бы признателен, если бы кто-нибудь мог вести меня в правильном направлении или дать мне подсказку, как я должен подойти к чему-то подобному.
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
ausgabeLocation.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var lon = position.coords.longitude;
var lat = position.coords.latitude;
var jsonURL = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=imperial&APPID=';
getWeather(jsonURL, lon, lat);
}
function getWeather(jsonURL, lon, lat) {
$.getJSON(jsonURL, function(json) {
var tempFahr = json['main']['temp'];
var tempCels = Math.floor(((tempFahr - 32)/1.8) * 100)/100;
var iconID = json['weather'][0]['id'];
var city = json['name'];
ausgabeLocation.innerHTML = city;
ausgabeTemp.innerHTML = tempCels + "°C";
$("#iconShow").html("<i class='owf owf-" + iconID + "'></i>");
});
}
$(document).ready(function() {
getLocation();
var unitSwitch = false;
$('.swapUnit').click(function() {
if (unitSwitch) {
$(this).html(tempCels + " '°C'");
unitSwitch = false;
} else {
$(this).html(tempFahr + " '°F'");
unitSwitch = true;
}
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1 id="ausgabeLocation" class="text-center"></h1>
<div id="cont-center" class="box container-fluid box-shadow">
<span id="iconShow" class="icon1"></span>
<div id="ausgabeTemp" class="swapUnit">
</h2>
</div>
</body>Вы можете смотреть на все вещи здесь: http://codepen.io/ttimon/pen/QEPZJW
Спасибо.
Редактировать: Хорошо, я изменил некоторые вещи, и теперь у меня это работает. См. Код ниже. Единственное, что мне интересно, это то, что я мог бы сделать это без использования глобальных переменных.
Javascript
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
ausgabeLocation.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var lon = position.coords.longitude;
var lat = position.coords.latitude;
getWeather(lon, lat);
}
function getWeather(lon,lat){
var jsonURL = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=metric&APPID=af0761262e54344b40ea5757a84f9e81';
$.getJSON(jsonURL,function(json){
var temp = json['main']['temp'];
var iconID = json['weather'][0]['id'];
var city = json['name'];
writeStuff(temp,iconID,city);
});
function writeStuff(temp,iconID,city){
window.tempFahr = Math.floor(temp*9/5+32);
window.tempCels = Math.floor(temp*100/100);
ausgabeLocation.innerHTML = city;
ausgabeTemp.innerHTML = tempCels + "°C";
$("#iconShow").html("<i class='owf owf-"+iconID+"'></i>");
}
}
$(document).ready(function() {
getLocation();
var unitSwitch = false;
$(document).on('click','#iconShow',function() {
if(unitSwitch===true){
ausgabeTemp.innerHTML = tempCels + '°C';
unitSwitch = false;
}else{
ausgabeTemp.innerHTML = tempFahr + '°F';
unitSwitch = true;
}
});
});
HTML
<body>
<h1 id="ausgabeLocation" class="text-center"></h1>
<div id="cont-center" class="box container-fluid box-shadow">
<span id="iconShow" class="icon1" ></span>
<div id="ausgabeTemp" class="swapUnit"></div>
</div>
</body>
Ваша проблема в переменной области. Вы нажимаете делегат, не имеет понятия 'tempCels' или' tempFahr', потому что они объявлены в рамках 'getWeather' –
@IanBrindley Благодарим вас за отзыв. Как я могу это исправить? Как я могу сделать эти переменные доступными для функции click? – user2317500
@IanBrindley Привет за ваш совет. Сейчас я работаю. См. Мое редактирование в исходном сообщении. У меня только один вопрос. Возможно ли это, если не использовать глобальные переменные, или это нормально использовать глобальные переменные здесь? Спасибо за вашу помощь. – user2317500