在html中更改json的天气图标

时间:2013-01-01 08:21:39

标签: javascript jquery html json

我的计算机图标中有天气状况

我想用我的图标更改默认图标我能做什么

在json文件中有变量,例如:“icon”:“partiallycloudy”

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<body>
<img id='wicon'><img>
<script>
jQuery(document).ready(function($) {
 var state = 'CA';
 var city = 'San_Francisco';
 var URL = 'http://api.wunderground.com/api/102376e7c0e1c995/geolookup/conditions/q/' + state + '/' + city + '.json';
$.ajax({ url : URL, 
dataType : "jsonp", 
success : function(parsed_json) { 
var location = parsed_json['current_observation']['display_location']['full']; 
var temp = parsed_json['current_observation']['temperature_string'];
var wicon = parsed_json['current_observation']['icon_url'];
</script>
</body>
</head>
</html>

我想更改天气状况图标 通过像这样添加变量到链接

http://icons-ak.wxug.com/i/c/k/'; +图标变量+'。gif

jQuery(document).ready(function($) {
 var state = 'CA';
 var city = 'San_Francisco';
 var URL = 'http://api.wunderground.com/api/102376e7c0e1c995/geolookup/conditions/q/' + state + '/' + city + '.json';
$.ajax({ url : URL, 
dataType : "jsonp", 
success : function(parsed_json) { 
var location = parsed_json['current_observation']['display_location']['full']; 
var temp = parsed_json['current_observation']['temperature_string'];
var wicon = parsed_json['current_observation']['icon_url'];
var humidity = parsed_json['current_observation']['relative_humidity'];
var wind = parsed_json['current_observation']['wind_string'];
var pressure = parsed_json['current_observation']['pressure_mb'];
var visibility = parsed_json['current_observation']['visibility_km'];
var weicon = parsed_json['current_observation']['icon'];
$("#meteo").text(temp);
$( '<img>' ).attr( 'src', wicon ).appendTo( '#wicon' );
$("#location").text(location);
$("#humidity").text(humidity);
$("#wind").text(wind);
$("#pressure").text(pressure);
$("#visibility").text(visibility);
} }); }); 

var wicon是天气图标的链接 var weicon是图标的名称

请帮助

2 个答案:

答案 0 :(得分:0)

只需将此添加到成功功能

即可
\\ get the element that we will change
var pic = document.getElementById('wicon');
\\ update the img to new src
pic.src = wicon

答案 1 :(得分:0)

我想你可以将代码更改为此 这取决于wicon值是什么

<script>
    jQuery(document).ready(function($) {
        var state = 'CA';
        var city = 'San_Francisco';
        var URL = 'http://api.wunderground.com/api/102376e7c0e1c995/geolookup/conditions/q/' + state + '/' + city + '.json';
        $.ajax({
            url: URL,
            dataType: "jsonp",
            success: function(parsed_json) {
                var location = parsed_json['current_observation']['display_location']['full'];
                var temp = parsed_json['current_observation']['temperature_string'];
                var wicon = parsed_json['current_observation']['icon_url'];

                if(wicon !=null) {
                    $("#icoImg").attr("src", wicon);
                }
            }
        });
    }

    );
            </script>


<body>

    <img id="icoImg" src="#"/>
</body>