0

http://api.wunderground.com/api/102376e7c0e1c995/geolookup/conditions/q/IA/Cedar_Rapids.json

これは、アイオワ州シーダー ラピッズの気象条件を取得するための .json ファイルです。この json ファイルには、天気アイコンの状態を与える変数があります。IDを使用してこの画像をhtmlに入れたいです。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<h1 id='meteo'></h1>
<script type="text/javascript">
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['location']['city']; 
            var temp = parsed_json['current_observation']['temperature_string'];
            var wicon = parsed_json['current_observation']['icon_url'];
            $("#meteo").text(temp); 
        }
    });
}); 
</script>
</body>
what can i do
</html>
4

5 に答える 5

1

正しいsrc属性を持つimgタグを作成するだけです。

$( '<img>' ).attr( 'src', wicon ).appendTo( '#meteo' );

デモ： http： //jsfiddle.net/dAz2p/

于 2012-12-31T16:10:18.217 に答える
1

スクリプトの最後の行として、次を追加します。

$("#meteo").append('<img src="' + wicon + '"/>");
于 2012-12-31T16:10:46.140 に答える
0

wiconプレースホルダー画像のsrcプロパティに割り当てる必要があります

編集：要求に応じてコード。

まず、最後のアイコンを表示するプレースホルダー画像を配置します。

...
<img id='meteo_icon' src='meteo_loading.png'>
<h1 id='meteo'></h1>
...

次に、テキストを割り当てるときに、srcも割り当てます。

...
$("#meteo").text(temp);
$("#meteo_icon").attr("src", wicon);
...
于 2012-12-31T16:08:30.687 に答える
0

ページに画像要素を配置し (ID Image1 など)、次のようにします。

   success: function (parsed_json)
    {
        var location = parsed_json['location']['city'];
        var temp = parsed_json['current_observation']['temperature_string'];
        var wicon = parsed_json['current_observation']['icon_url'];
        $("#meteo").text(temp);

        $("#Image1").attr("src", wicon);
     }
于 2012-12-31T16:10:57.913 に答える
0

正しい属性を持つ画像タグを追加してください。

$( '<img>' ).attr( 'src', wicon ).appendTo( '#meteo' );

自分自身をチェックしてください：http://jsfiddle.net/dAz2p/

于 2012-12-31T16:14:40.310 に答える