Question

所以我最近一直在制作天气应用程序。我测试了我的代码和温度，国家和当前天气的描述没有显示。我认为问题是在我的html地理定位功能之后开始的。我觉得这个功能无论如何都无法解析天气api数据。

我的代码如下：

$( document ).ready(function(){

  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
  } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
  }


  function showPosition(position) {
var lat = "lat= " + position.coords.latitude; 
var lon = "lon= " + position.coords.longitude;
getWeather(lat,lon);
  }

   function getWeather(lat,lon){
var urlstring = "https://fcc-weather-api.glitch.me/api/current?" + lat + "&" + lon;
$.ajax({
    url : urlstring,
    dataType : "jsonP",
    success : function(data){
        var temp = data.main.temp;
        var desc = data.weather[0].description;
        var country = data.sys.country;
        $("#desc").html(desc);
        $("#temp").html(temp);
    }
})
  }

  var ctof = $("#c/f").click(function(){
     var cel = Math.round((temp - 32) * 5 / 9);   
     var faren = Math.round((temp * 9 / 5) + 32);
     if(ctof == true){
        $("#temp").html(faren);
      }
      else{
        $("#temp").html(cel);
      }
        }) 
  });

我甚至包含了我的html代码仅供参考

<!DOCTYPE html>
<html>
<head><title>Web App</title></head>
<body>
<div class="container">
   <div class="row">
     <header class="col-xs-12 text-center">
       <h1>Free Code Camp </h1>
       <h1>Weather App</h1>
     </header>

     <div class="col-xs-8 col-xs-offset-2">
       <div class="text-center status">
         <p><span id="city"></span> <span id="country"></span></p>
         <p><span id="temp"><button id="#c/f">C/F</button></span></p>
         <p id="desc"></p>
       </div>
   <div class ="info">
 <div class="develop">Developed by = Shumaila Bi Shaikh</div>
 <div class="langs">Created by: HTML,CSS,ANGULARJS</div>
 </div>

 <script src="Weather.js"></script>

Answer 1

您是否尝试过console.log(desc)或其他数据？我怀疑你得到了你需要的阵列，但是你试图将这些阵列直接附加到你的html中，这将不起作用......

这样的行：

    $("#desc").html(desc);
    $("#temp").html(temp);

除非您传递有效的html字符串，例如<p>Hello</p>，否则这将不起作用，但在这种情况下，您正在传递数组。您需要确定如何实际呈现数据，然后将其传递到.html()来电。

根据您的数据结构，可能看起来像这样

let descString = "";
desc.forEach(value => descString += "<p>" + value.something + "</p>")
$("#desc").html(descString)

Answer 2

您的问题在这一行：

var ctof = $("#c/f").click(function() {

当您需要选择具有CSS表示法中使用的字符的元素时，您需要使用前缀 \\ 来转义它们。有关详细信息，请参阅docs。

因此，你需要写：

var ctof = $("\\#c\\/f").click(function(){

第二个问题在这一行：

<p><span id="temp"><button id="#c/f">C/F</button></span></p>

当你获得 data.main.temp 时，你会覆盖并删除按钮。因此，请将行更改为：

<p><span id="temp"></span><button id="#c/f">C/F</button></p>

要在Chrome中启用地理位置，您需要按照此answer

中的说明启用它

fiddle

我的天气应用程序的网页中没有显示任何数据

2 个答案: