날씨 앱 - 텍스트 대신 기호 사용

Question

좋아, 이제는 RSS 피드를 사용하는 방법을 배우는 중 일환으로 간단한 날씨 앱을 만들려고합니다. 날씨가 텍스트로 표시됩니다. 예 : 금요일 : Sunny, Max Temp, Min Temp.

그 텍스트를 기호로 변경하여 "맑음"대신 태양의 이미지를 표시하고 싶습니다. 아래에 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> 

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

그냥 코드에 이것을 추가하고 태그에하고 싶은 이미지의 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">'); 
    }); 
});