从html中的json更改天气图标答案

【问题标题】：change weather icon from json in html从html中的json更改天气图标
【发布时间】：2023-04-03 09:02:01
【问题描述】：

我的电脑上有天气状况图标

我想通过我的图标更改默认图标我该怎么办

在 json 文件中有一个变量，例如："icon":"partlycloudy"

<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 是图标的名称

请帮忙

【问题讨论】：

那么您要做的是将 img 标签的 src 更改为新的 src？

标签： javascript jquery html json

【解决方案1】：

只需将其添加到成功函数中

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

【讨论】：

【解决方案2】：

我猜你应该把你的代码改成这个这取决于 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>

【讨论】：

我要更改图标的来源？
我想要一个 img 链接中的变量，像这样 icons-ak.wxug.com/i/c/k' + icon variable + '.gif
我听不懂，请给我详细信息