天气应用程序 - 使用符号而不是文本

Question

好的，我目前正在尝试创建一个简单的天气应用程序，作为学习如何使用 RSS 源的一部分。我将天气显示为文本，例如周五：晴天、最高温度、最低温度。

我想将该文本更改为符号，以便显示太阳图像而不是说“Sunny”。我将在下面展示 HTML 和 Javascript。希望这是有道理的，我可以解决这个问题。

HTML

<div id="home" data-role="page">
<div data-role="header" data-add-back-btn="true" >
    <h1>Your Handy Little Weather App</h1>
</div>
<div data-role="content">
    <img src ="./images/UWSLogo.png" width ="174" height ="116" alt ="Logo" align     ="right"/>
    <h2>UWS Weather</h2>
    <p>Check the weather at the UWS Campuses.</p>
    <p>Choose your desired location.</p>
    <ul data-role="listview" data-inset="true">
        <li><a id="ayrFeed" href="#ayr">Ayr</a></li>
        <li><a id="dumfriesFeed" href="#dumfries">Dumfries</a></li>
        <li><a id="hamiltonFeed" href="#hamilton">Hamilton</a></li>
        <li><a id="paisleyFeed" href="#paisley">Paisley</a></li>
    </ul>
    <h2>Other Weather</h2>
    <p>Find out more with our other weather options.</p>
    <ul data-role="listview" data-inset="true">
            <li><a id="uniFeed" href="#uni">Other Universities</a></li>
            <li><a id="holidayFeed" href="#holiday">Popular Holiday Destinations</a>  </li>
    </ul>
</div>

</div>
</div>

<div id="ayr" data-role="page">
<div data-role="header">
    <h1 id="ayrTitle"></h1>

</div>
<div data-role="content">
    <ul id="ayrList" data-role="listview" data-inset="true">
        <!-- Weather reports go here. -->
    </ul>
</div>

</div>

<div id="dumfries" data-role="page">
<div data-role="header">
    <h1 id="dumfriesTitle"></h1>

</div>
<div data-role="content">
    <ul id="dumfriesList" data-role="listview" data-inset="true">
        <!-- Weather reports go here. -->
    </ul>
</div>

</div>
</div>

<div id="hamilton" data-role="page">
<div data-role="header">
    <h1 id="hamiltonTitle"></h1>

</div>
<div data-role="content">
    <ul id="hamiltonList" data-role="listview" data-inset="true">
        <!-- Weather reports go here. -->
    </ul>
</div>

</div>

JavaScript

$(document).ready(function() {

$("#ayrFeed").bind('click', function() {
    getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2656708/3dayforecast.rss",
        showAyrWeatherFeed);
});

$("#dumfriesFeed").bind('click', function() {
    getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2650798/3dayforecast.rss",
        showDumfriesWeatherFeed);
});

$("#hamiltonFeed").bind('click', function() {
    getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2647570/3dayforecast.rss",
        showHamiltonWeatherFeed);
});
function getFeed(url, success){
if(window.navigator.onLine) {
    $.jGFeed(url, function(feeds) {
        // Check for errors
        if(!feeds){
            // there was an error
            return false;
        } else {
            localStorage.setItem(url, JSON.stringify(feeds));
            success(feeds.title, feeds.entries);
        }
    });
} else {
    // Get the fall-back...
    var feed = JSON.parse(localStorage.getItem(url));
    if(feed && feed.length > 0) {
        success(feed.title, feed.entries);
    }
}
}

function showPaisleyWeatherFeed(title, items) {
$("#paisleyTitle").text(title);
var list = $("#paisleyList");
list.empty();
for(var index = 0; index < items.length; index += 1) {
    list.append(formatItem(items[index]));
}
$.mobile.changePage($("#paisley"), "flip");
list.listview("refresh");
}

function showHamiltonWeatherFeed(title, items) {
$("#hamiltonTitle").text(title);
var list = $("#hamiltonList");
list.empty();
for(var index = 0; index < items.length; index += 1) {
    list.append(formatItem(items[index]));
}
$.mobile.changePage($("#hamilton"), "flip");
list.listview("refresh");
}

function formatItem(item) {
var listItem = document.createElement("li"),
    anchor = document.createElement("a");
anchor.setAttribute("href", item.link);
anchor.innerText = item.title;
listItem.innerHTML = anchor.outerHTML;
return listItem.outerHTML;
}

Answer 1

<img src="url" alt="some_text">

只需将其添加到您的代码中，并在标签中包含您想要的图像的 url。

Answer 2

这里有一个FIDDLE，如果对你有帮助的话，可以举个小例子。

<div>New York Sunny 85F</div>

---

div {
  background: #ddd;
  width: 200px;
  height: 80px;
  line-height: 80px;
  font-size: 23px;
  text-align: center;
  border-radius: 4px;
}
.weather-icon {
  width: 38px;
  height: 38px;
  vertical-align: text-bottom;
}

---

$(function() {
  $('div').html(function() {
    return $(this).html().replace('Sunny','<img src="https://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sunny.png" class="weather-icon">');
  });
});