0

我决定尝试不同的方法来解决这个问题。我认为对于这个特定问题，使用该函数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 字符串的页面的每个实例。

4

1 回答 1

0

我建议如下：

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 小提琴演示。

在演示中，我设置了元素的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 小提琴演示。

再次在 中进行另一个编辑，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 小提琴演示。

于 2012-11-02T22:34:47.560 回答