根據源代碼或'location.path'中的H1元素更改圖像源？

Question

我決定嘗試不同的方法來解決這個問題。我認爲使用函數location.path來確定專輯封面的來源對於此特定問題會更有效率，而不是依賴字符串。這裏是我只有這麼遠：

該圖像的HTML的一部分：

<img src="http://static.last.fm/flatness/catalogue/noimage/noalbum_g3.png" width="220" height="220" class="album-cover"/> 

的一段JavaScript代碼，我有：

var albumCover = document.getElementsByClassName('album-cover') // Get the album cover 
var currentLink = location.pathname 
var dictionary = 
{ // location.pathname : image source for albumCover 
'/music/King+Crimson/Red' : 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Red.jpg', 
'/music/King+Crimson/Discipline' : 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Discipline.jpg' 
} 

現在，這裏的部分代碼可能會不完整：

if (currentLink === ''// first part of the dictionary) 
{ 
    albumCover.src = '' second part of the dictionary 
}; 

else{}; 

任何幫助，歡迎和感謝閱讀，歡呼聲。

舊帖子： 對我提出的問題最近的後續，但我似乎無法能夠更改代碼以匹配我要找的。代碼出現在以下網站上：link

我有興趣在下面的代碼中更改圖像源。但是，新的圖像源將根據該網頁的H1元素所包含的內容來確定。

<div class="g3 album-cover-wrapper album-cover-wrapper--no-cover " > 
<img src="http://static.last.fm/flatness/catalogue/noimage/noalbum_g3.png" width="220" height="220" class="album-cover"/> 
    <section class="r add-top-margin remove-bottom-margin"> 
    <div class="g4"> </div> 
        </section> 
</div> 

現在我想用「字典清單」就像下面這將是有益的：

if H1 contains the string 'Discipline'{img.src="newsource.jpg'}; 

感謝您百忙之中閱讀此，歡呼的時候了！

編輯：這是我試過的一段代碼，但我猜它需要更多信息才能真正起作用。

var headerDef = document.getElementsByTagName('h1'), 
var img = document.getElementsByClassName('album-cover'); 

if (headerDef === 'Red') 
{ 
    img.src = "newsource.jpg"; 
}; 

else{}; 

的名單怎麼會舉幾個例子：

//string in H1 : new image source for the 'album-cover'-class image 
'Discipline' : 'http://ecx.images-amazon.com/images/I/41kcnkbxS-L._SL500_AA300_.jpg', 
'Red' : 'http://img.noiset.com/images/album/king-crimson-red-4-cd-cover-31985.gif', 
etc... 

這對於我不得不手動添加具有特定的H1-串頁面的每個實例的列表。

Answer 1

我建議如下：

var map = { 
    'red': 'oh my gods!', 
    'blue': 'blue? Really..?' 
}; 

function influenceImage(source, map) { 
    if (!source || !map) { 
     return false; 
    } 
    else { 
     var text = source.textContent || source.innerText; 
     for (var word in map) { 
      if (map.hasOwnProperty(word) && text.indexOf(word) !== -1) { 
       return map[word]; 
      } 
     } 
    } 
} 

// in real life, with an image use: 
// imageNode.src = influenceImage(document.getElementsByTagName('h1')[0], map); 
document.getElementById('test').title = influenceImage(document.getElementsByTagName('h1')[0], map);​ 

JS Fiddle demo。

在演示中，我設置了a元素的title屬性，但當然，如註釋中所述，只需設置圖像節點的src屬性即可。

上述改變，稍（內else {...}，以使其不區分大小寫的搜索/匹配：

var text = (source.textContent || source.innerText).toLowerCase(); 
for (var word in map) { 
    if (map.hasOwnProperty(word) && text.indexOf(word.toLowerCase()) !== -1) { 
     return map[word]; 
    } 
} 

JS Fiddle demo。

而另一位編輯，內else {...}再次，爲了以防添加默認的選項有沒有字匹配：

var text = (source.textContent || source.innerText).toLowerCase(); 
for (var word in map) { 
    if (map.hasOwnProperty(word) && text.indexOf(word.toLowerCase()) !== -1) { 
     return map[word]; 
    } 
} 
// we only get here if the `for` loop and the `if` doesn't throw out a match. 
return 'default string'; 

JS Fiddle demo。