Question

我正在研究一个小天气应用程序。我要做的最后一件事就是让大天气图标可点击以在华氏度和摄氏度之间切换°单位。

我的代码似乎没有做任何事情。如果有人可以指导我正确的方向或给我一个提示，我会很感激，我应该如何处理这样的事情。

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>

Answer 1

第二个问题是没有正确的封闭标签。所以这段代码

<div id="ausgabeTemp" class="swapUnit"></h2>

替换为

<div id="ausgabeTemp" class="swapUnit"></div>

Answer 2

您收到以下错误：

混合内容：页面请求了不安全的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

Javascript单击功能不起作用

2 个答案: