1

I've just got the basic yahoo weather feed on my page...

The following code renders the image below:

$ipaddress = $_SERVER['REMOTE_ADDR'];

// API username and key masked as sensitive and irrelevant to this question
$locationstr = "http://api.locatorhq.com/?user=MYAPIUSER&key=MYAPIKEY&ip=".$ipaddress."&format=xml";

$xml = simplexml_load_file($locationstr);

$city = $xml->city;

// We'll only be accounting for certain cities to start off with...
switch ($city)
{
    case "Pretoria":
        $loccode = "SFXX0044";

        $weatherfeed = file_get_contents("http://weather.yahooapis.com/forecastrss?p=".$loccode."&u=c");
        if (!$weatherfeed) die("weather check failed, check feed URL");
        $weather = simplexml_load_string($weatherfeed);

        readWeather($loccode);
        break;
}

function readWeather($loccode)
{
    $doc = new DOMDocument();
    $doc->load("http://weather.yahooapis.com/forecastrss?p=".$loccode."&u=c");

    $channel = $doc->getElementsByTagName("channel");

    foreach($channel as $ch)
    {
        $item = $ch->getElementsByTagName("item");

        foreach($item as $rcvd)
        {
            $desc = $rcvd->getElementsByTagName("description");

            // Save the weather data to a session variable for placement on the page
            $_SESSION["weather"] = $desc->item(0)->nodeValue;
        }
    }
}

My Yahoo Weather data

It looks pretty terrible in my opinion, so I want to change the overall design here to fit it in with the rest of my site.

I had an idea about rewriting the rendered html with jquery, but I'm not getting anywhere there.

Here's the code I'm getting rendered currently:

<div id="weather-feed">
    <img src="http://l.yimg.com/a/i/us/we/52/34.gif"/>
    <b>Current Conditions:</b>
    Partly Cloudy, 17 C
    <b>Forecast:</b>
    Tue - PM Thunderstorms. High: 26 Low: 16
    Wed - Mostly Sunny. High: 27 Low: 16

    <a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html">Full Forecast at Yahoo! Weather</a>
    (provided by <a href="http://www.weather.com" >The Weather Channel</a>)
</div>

Basically, all I want to do with this is to modify this rendered code as follows:

<div id="weather-feed">
    <div class="weather-icon">
        <img src="http://l.yimg.com/a/i/us/we/52/34.gif"/>
    </div>
    <div class="conditions">
        Partly Cloudy, 17 C
    </div>
    <div class="forecast">
        <b>Forecast:</b>
        Tue - PM Thunderstorms. High: 26 Low: 16
        Wed - Mostly Sunny. High: 27 Low: 16

        <a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html">Full Forecast at Yahoo! Weather</a></div>
    <div class="credit">
        provided by <a href="http://www.weather.com" >The Weather Channel</a>
    </div>
</div>

I'm not having any luck finding anything that'll guide me on how to do this.

Are there any api calls I can leverage to get a different presentation of my requested data?

If not, can anyone suggest how I could successfully rewrite this code? Maybe with a small example...

4

1 に答える 1

0

取得している結果の html チャンクを取得し、jquery を使用してそれを改造します。幸いなことに、メインの div には適切な ID があります。次のように、メインの html チャンクから個々のチャンクを取得できるはずです。

<img ..../>を作成し、それを 2 番目の html チャンクにダンプして、<div>クラスをアタッチした s を追加します。の行に沿ったものalert($('div#weather-feed').html())、たとえば、これはチャンク全体を出力します。先にスキップ: alert($('div#weather-feed img').attr("src"))img の src を取得します。遊んで、html を使用し、再構築します。

続き: jquery がどのように機能するか、および document.ready() とは何かを知っている、または理解できると仮定します。Jquery はここであなたの友達になります。例の打撃を投稿しています。これを見てください。随所にヒントがあります。 いくつかのhtmlをいじる方法

于 2013-03-12T08:25:33.423 に答える