根据页面标题更改图像答案

【问题标题】：Change image depending on page title根据页面标题更改图像
【发布时间】：2013-09-14 13:59:06
【问题描述】：

我正在尝试做的是根据页面标题，正文中的图像会改变。例如，如果页面标题是“We Love Apples”，则正文中的图像将是一个苹果。如果标题包含另一个水果，它将显示另一个水果。如果页面标题不包含脚本正在查找的任何单词，则正文中将有一个默认图像。

我确实从 http://www.codingforums.com/archive/index.php/t-218600.html 找到了这个脚本，但我似乎无法让它工作。

任何人有任何提示或指示？感谢您的帮助！

<!doctype html>
<html>
<title>2image</title>
<head>
</head>
<body>

<div><img src="" alt="anImageDesc" name="myimage" width="50px" height="50px" id="someImage" />
</div>

<script type="text/javascript">
var imgs = [
"http://www.domain.com/images/image_255 Company_Name.jpg",
"http://www.domain.com/images/image_256 Company_Name.jpg",
"http://www.domain.com/images/image_257 Company_Name.jpg" //no comma after last image
];
var el = document.getElementById("someImage");
var title = document.title;
for (var i=0;i<imgs.length;i++){
if (imgs[i].indexOf(title) != -1) { 
el.src = imgs[i];
break;  
} else {el.src = "image_256.gif"} //a default image incase nothing is found
}
</script>

</body>
</html>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

看这个：`DEMO`

我建议在标题中查找要查找的标记的键/值映射，并将适当的图像与该标记相关联：

var images = {
    'very large apple' : 'http://www.domain.com/images/very_large_apple_image_here.jpg',
    'large apple' : 'http://www.domain.com/images/large_apple_image_here.jpg',
    'apple' : 'http://www.domain.com/images/apple_image_here.jpg',
    'orange' : 'http://www.domain.com/images/orange_image_here.jpg'
};

var defaultImage = images['apple']; //Set your default here.
var imageElement = document.getElementById("someImage");
var title = document.title.toLowerCase();
var source = null;

for (var t in images) {
    if (title.indexOf(t.toLowerCase()) != -1) {
        source = images[t]; //Found a match.
        break;
    }
}

if (!source) source = defaultImage;

imageElement.src = source;

【讨论】：

已修复以允许像 apples 这样的子字符串。
有没有办法调整它，让它也能寻找两个词，例如“大苹果”，导致身体出现大苹果的图像？
制作密钥large apple，如：'large apple': 'my_large_apple.jpg'
对不起，还要确保你把它放在'apple'键之前，否则它会先在'apple'中找到匹配，然后退出循环。
同样，如果你想为very large apple添加一个密钥，你需要把它放在large apple和apple之前。

【解决方案2】：

使用document.title 获取窗口标题，并以此为基础设置图像。我使用toUpperCase() 来确保无论大小写都能找到您要查找的文本。如果没有找到文本，search() 将返回 -1。

if(window.title.toUpperCase().search('APPLE') > 0)
{
    //change image to apple
}
else if(document.title.toUpperCase().search('ORANGE') > 0)
{
    //change image to orange
}
else 
{
    //use the default image
}

【讨论】：

我会亲自使用开关。或者使用键/值集合。
@StefanDenchev 您如何使用开关搜索不同的文本？
我想我不会，不:)。虽然apparently you can（有点）。

【解决方案3】：

定义要查找的水果，然后检查标题是否包含任何水果，然后找到合适的图片：

var fruits = [
    'apple',
    'orange',
    'grape'
]

var imgs = [
    "http://www.domain.com/images/image_255_grape.jpg",
    "http://www.domain.com/images/image_256_orange.jpg",
    "http://www.domain.com/images/image_257_apple.jpg"
];

var fruit = 'apple', // default
    img   = '';

// check the title for fruit
for (var i=0; i<fruits.length; i++) {}
    if ( document.title.indexOf(fruits[i]) != -1 ) fruit = fruits[i];
}

//find matching image
for (var i=0; i<imgs.length; i++) {}
    if ( imgs.indexOf(fruit) != -1 ) img = imgs[i];
}

var el = document.getElementById("someImage");
el.src = img;

【讨论】：

【解决方案4】：

创建查找：

var myList = {
    images: [{
        id: "grape",
        name: "somelocation/file.png"
    }, {
        id: "crabapple",
        name: "c:/images/brightblue.png"
    }, {
        id: "lime",
        name: "grassgreen.png"
    }, {
        id: "bannana",
        name: "dollarbill.png"
    }]
};

var lookup = {};
// create refernece to list above and use it everywhere
lookup.list = myList;
for (var i = 0, len = lookup.list.images.length; i < len; i++) {
    lookup[lookup.list.images[i].id] = lookup.list.images[i];
}
alert(lookup['lime'].name);

对于标题：

lookup[document.title].name;

【讨论】：

请注意，这也适用于诸如“We love red apple”之类的字符串，只要它与 id 字符串匹配即可。

看这个：DEMO

看这个：`DEMO`