Javascript点击功能不起作用答案

【问题标题】：Javascript Click Function doesn't workJavascript点击功能不起作用
【发布时间】：2016-08-25 11:05:04
【问题描述】：

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

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

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 感谢您的反馈。我将如何解决这个问题？如何使这些变量可用于点击功能？
@IanBrindley 嘿，谢谢你的小费。我现在可以工作了。请参阅我在原始帖子中的编辑。我只有一个后续问题。如果不使用全局变量，这可能吗？还是可以在这里使用全局变量？感谢您的帮助。

标签： javascript jquery button click

【解决方案1】：

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

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

替换为

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

【讨论】：

【解决方案2】：

您收到以下错误：

混合内容：页面请求不安全的 XMLHttpRequest 端点 'http://api.openweathermap.org/data/2.5/weather?lat=32.647371&lon=35.42155100000001&units=imperial&APPID=af0761262e54344b40ea5757a84f9e81'。此请求已被阻止；内容必须通过 HTTPS 提供。

HTTPS 仅在 Professional 和 Enterprise 帐户中可用。在免费帐户中，此功能不可用。请阅读更多http://openweathermap.org/price

【讨论】：

这不是我的问题。 api调用在firefox上对我来说很好。不过，我在使用 chrome 时遇到了问题。对你来说可能是一样的。无论如何，谢谢你看它！