1

我刚刚在我的页面上获得了基本的雅虎天气提要......

以下代码呈现如下图像：

$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;
        }
    }
}

我的雅虎天气数据

在我看来，它看起来很糟糕，所以我想改变这里的整体设计以适应我网站的其他部分。

我有一个关于用 jquery 重写呈现的 html 的想法，但我没有得到任何地方。

这是我目前正在渲染的代码：

<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>

基本上，我要做的就是修改这个呈现的代码，如下所示：

<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>

我没有任何运气找到任何可以指导我如何做到这一点的东西。

我可以利用任何 api 调用来获得我请求的数据的不同呈现方式吗？

如果没有，谁能建议我如何成功地重写这段代码？也许举个小例子......

4

1 回答 1

0

抓取你得到的结果 html 块，然后使用 jquery 修改它的废话。幸运的是，主 div 有一个不错的 id。您应该能够从主 html 块中获取单个块，例如

<img ..../>，并将其转储到第二个 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 回答