2017-05-31 51 views
1

以下JavaScript工程,但我想用字體真棒圖標替換單詞「YOUTUBE」。變量「類型」要麼是YouTube或VIMEO或的SoundCloud,所以我試圖將一個JS的if/then語句在意大利麪條的中間...用if/then Javascript輸出HTML?

這是代碼:

playlistHtml += "<li>"+val.sources[0].type+" Song Name Here</li>" 

這是輸出:

YOUTUBE歌曲名稱這裏

playlistHtml += "<li><div id='logo'></div>"+ 
    if (val.sources[0].type == "YOUTUBE") 
    { 
     document.getElementById('logo').innerHTML = "<i class='fa fa-youtube-play' aria-hidden='true'></i> Song Name Here</li>";}); 

任何幫助表示讚賞...

+0

那麼,什麼是你期望的輸出? – Siva

+1

您的問題標題與您的問題/代碼不符。 PHP在哪裏? –

回答

2

創建一個返回font awesome類的函數。 然後像這樣打電話。

document.getElementById('logo').innerHTML = "<i class='fa "+getIcon(val.sources[0].type)+"' aria-hidden='true'></i> Song Name Here</li>"; 

功能:

function getIcon(source){ 
    switch(source.toUpperCase()){ 
     case "YOUTUBE" : return "fa-youtube-play" 
     case "VIMEO" : return "fa-vimeo" 
     case "SOUNDCLOUD" : return "fa-soundcloud" 
     default : return "fa-music" 
    } 
} 
+0

如果您返回,則不需要「中斷」。 –

+0

是啊!我有點習慣於用開關來使用它。 :P無論如何編輯! –

2

這是未經測試的,我剛剛重組了你的代碼。

playlistHtml += "<li><div id='logo'>"; 
if (val.sources[0].type == "YOUTUBE") { 
    playlistHtml += "<i class='fa fa-youtube-play' aria-hidden='true'></i>" 
} 
if (val.sources[0].type == "VIMEO") { 
    playlistHtml += "<i class='fa fa-vimeo-play' aria-hidden='true'></i>" 
} 
if (val.sources[0].type == "SOUNDCLOUD") { 
    playlistHtml += "<i class='fa fa-soundcloud-play' aria-hidden='true'></i>" 
} 
playlistHtml += "</div>Song Name Here</li>";