根据源代码或'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。