Météo App - Utilisation de symboles au lieu du texte

Question

Ok, j'essaie actuellement de créer une application météo simple pour apprendre à utiliser les flux RSS. J'ai le temps affiché sous forme de texte E.g. Vendredi: Ensoleillé, Max Temp, Min Temp.

Je veux changer ce texte en symboles, de sorte qu'au lieu de dire «Ensoleillé», il affiche l'image d'un soleil. Je vais montrer le HTML et Javascript ci-dessous. J'espère que cela a du sens et que je peux régler ce problème.

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> 

javscript

$(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"> 

ajouter ceci à votre code et inclure l'URL de l'image que vous souhaitez dans la balise.

Answer 2

est ici un FIDDLE avec petit exemple si elle vous aide.

<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">'); 
    }); 
});