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{};

どんな助けでも大歓迎です。読んでくれてありがとう、乾杯。

古い投稿: 最近尋ねた質問のフォローアップですが、探しているものと一致するようにコードを変更できないようです。コードは次の Web サイトにあります:リンク

以下のコードで画像ソースを変更することに興味があります。ただし、新しい画像ソースは、その Web ページの 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 文字列を持つページの各インスタンスを手動で追加する必要があるリストです。

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 に答える