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>

现在我认为使用'dictionary-list'会很有用，如下所示：

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

在演示中，我设置了title元素的a属性，但当然，如评论中所述，只需设置图像节点的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

根据源代码中的H1元素或“location.path”更改图像源？

1 个答案: