Javascript點擊功能不起作用
[英]Javascript Click Function doesn't work
問題描述
我正在開發一個小天氣應用程序。 我要做的最后一件事是使“大天氣”圖標可單擊，以在華氏度和攝氏溫度之間切換°單位。
我的代碼似乎什么也沒做。 如果有人可以指導我正確的方向或給我提示，我將如何處理類似的事情，將不勝感激。
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
謝謝。
編輯：確定，我更改了一些內容，現在可以正常使用了。 請參見下面的代碼。 我唯一想知道的是，如果不使用全局變量就可以做到這一點。
Java腳本
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>
2 個解決方案
解決方案1
1 2016-08-25 11:18:39
第二個問題是沒有正確的封閉標簽。 所以這段代碼
<div id="ausgabeTemp" class="swapUnit"></h2>
替換為
<div id="ausgabeTemp" class="swapUnit"></div>
解決方案2
0 2016-08-25 11:36:55
您收到以下錯誤：
混合內容：該頁面請求了不安全的XMLHttpRequest端點' http://api.openweathermap.org/data/2.5/weather?lat=32.647371&lon=35.42155100000001&units=imperial&APPID=af0761262e54344b40ea5757a84f9e81 '。 該請求已被阻止； 內容必須通過HTTPS提供。
HTTPS僅在專業帳戶和企業帳戶中可用。 在免費帳戶中，此功能不可用。 請閱讀更多http://openweathermap.org/price
.click（）函數不起作用javascript / jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.