jquery simpleweather无法识别

时间:2014-02-24 13:33:59

标签: javascript jquery html yahoo-weather-api

我想使用simpleweatherjs在我的网站上显示天气,但它不适合我。谁能告诉我我做错了什么?页面是空白的。如果我,例如行$ .simpleWeather({...})之前;把$(“#weather”)。html(“test”),然后这句话工作,但它不能在$ .simpleWeather({...})下工作;就像它在例子中所示。

这是我的HTML:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Weather</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/2.5.0/jquery.simpleWeather.min.js"></script>
</head>
<body>

<div id="weather"></div>
<script>
// Docs at http://simpleweatherjs.com
$(document).ready(function() {
  $.simpleWeather({
    location: 'Austin, TX',
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

</script>
</body>

3 个答案:

答案 0 :(得分:3)

您是否正在运行本地文件中的代码?即在浏览器中导航到c:\ html \ test.html(或等效物)。

在为我这样做时似乎不起作用,但是当我在网络服务器上托管HTML文件(我使用tomcat)并导航到http://localhost:8080/html/test/html时它起作用了。

编辑:这可以解释为什么它在JS Fiddle上工作正常

答案 1 :(得分:1)

尝试清除你的行:

 <link rel="stylesheet" type="text/css" href="style.css">

也许隐藏着一些东西。

或/并更改行:(如果您是本地人)

//query.yahooapis.com/v1/public/yql

  http://query.yahooapis.com/v1/public/yql

答案 2 :(得分:0)

控制台错误表示无法加载

   //query.yahooapis.com/v1/public/yql.....

因此,使用http或https(如

)为网址添加前缀
    https://query.yahooapis.com/v1/public/yql.....