通过单击Javascript更改多个图像 [英] Javascript multiple image change with button clicks
问题描述
好吧，这就是我想要做的，因为它太模糊了，所以这里有一个更好的解释，请记住，我现在只对页面进行了大约2周的编程，所以我们将不胜感激.
Ok, this is what I'm trying to do, it was too vague earlier so here's a better explanation, keep in mind I've only been programming pages for like 2 weeks now so any help is appreciated.
我需要创建一个HTML/JavaScript网页，该网页显示三个图像以及每个图像的标题(说明).对于每个图像，我还需要创建一个按钮，以将第一幅图像更改为同一主题上的另一幅图像(并更改标题).还需要有一个按钮，用于将所有三个图像恢复为原始图像.
I need to create a HTML/JavaScript webpage that displays three images along with a caption (description) for each image. For each image I need to also create a button that changes the first image to a different image on the same subject (and change the caption too). Also need to have a button that restores all three images back to the original images.
我使编码起作用，因此单击按钮时一个图像将变为另一图像，但是当我添加第二和第三编码时，将不再起作用.
I got the coding to work so that one image would change to another on button click but then when I added my 2nd and 3rd coding nothing would work anymore.
<html>
<head>
<script>
function changeImage()
{
var img = document.getElementById("image");
img.src="http://cdn.memegenerator.net/images/300x/159304.jpg";
return false;
}
</script>
</head>
<body>
<img id="image" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
<script>
function changeImage()
{
var img = document.getElementById("image1");
img.src="http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg";
return false;
}
</script>
<body>
<img id="image1" src="http://static.guim.co.uk/sys- images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
<button id="Click1" onclick="changeImage();">Click to change!</button>
</body>
<br>
<script>
function changeImage()
{
var img = document.getElementById("image2");
img.src="http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg";
return false;
}
</script>
<body>
<img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master- chief-1.jpg" />
<button id="Click2" onclick="changeImage();">Click to change!</button>
</body>
<br>
</html>
推荐答案
页面中有几个问题:缺少文档类型声明，缺少 title 标记， head <中的实际内容HTML/code>和多个 body 标签.除此之外，每个 script 中的 changeImage()均被替换为新的.最后，只有最后一个函数，它将为#image2 更改 src .
There are several issues in your page: Missing document type declaration, missing title tag, actual content HTML in head and multiple body tags. In addition to these, changeImage() is replaced in every script with a new one. Finally there will be only the last function, which changes the src for #image2.
如果我正确理解了您的问题，则需要这样的内容:
If I've understood your question correctly, you need something like this:
头中的脚本:
function changeImage (element) {
var n,
imageData = [
[
{
src: "http://thechive.files.wordpress.com/2011/10/william-defoe.jpg",
caption: "Caption for image 1.1"
},
{
src: "http://cdn.memegenerator.net/images/300x/159304.jpg",
caption: "Caption for image 1.2"
}
],
[
{
src: "http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg",
caption: "Caption for image 2.1"
},
{
src: "http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg",
caption: "Caption for image 2.2"
}
],
[
{
src: "http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg",
caption: "Caption for image 3.1"
},
{
src: "http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg",
caption: "Caption for image 3.2"
}
]
];
if (element > -1) {
document.getElementById('image' + element).src = imageData[element][1].src;
document.getElementById('caption' + element).innerHTML = imageData[element][1].caption;
} else {
for (n = 0; n < imageData.length; n++) {
document.getElementById('image' + n).src = imageData[n][0].src;
document.getElementById('caption' + n).innerHTML = imageData[n][0].caption;
}
}
return;
}
和 body :
<body>
<button onclick="changeImage(-1);" >Click to restore all!</button>
<div>
<h1 id="caption0">Caption for image 1.1</h1>
<button onclick="changeImage(0);">Click to change!</button>
<img id="image0" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
<div>
<h1 id="caption1">Caption for image 2.1</h1>
<button onclick="changeImage(1);">Click to change!</button>
<img id="image1" src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
</div>
<div>
<h1 id="caption2">Caption for image 3.1</h1>
<button onclick="changeImage(2);">Click to change!</button>
<img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg" />
</div>
</body>
如您所见，路径和标题的数据位于嵌套数组中的对象中.这样，它们便与实际内容分离了，并且代码更易于维护.
As you can see, the data for paths and captions is in the objects in nested array. This way they are separated from actual content, and the code is easier to maintain.
您没有提供图像标题的布局示例，因此我将标题信息放在图像上方的 H1 标签中.随时更改元素及其位置.请注意，您还可以在字幕文本中使用HTML标签.
You didn't provide an example of the layout for the captions of the images, so I put caption information in H1 tags above the image. Feel free to change the element and its position. Notice, that you can also use HTML-tags within caption texts.
但是，执行此代码时有一些限制和CPU时间浪费:每次单击都会创建 imageData ，每个元素只能使用两个不同的路径.
However, there are some limitations and waste of CPU-time when executing this code: imageData is created by every click and only two different paths can be used per element.
我建议您对任务采取更多的面向对象的方法.请查看此 JSfiddle ，它演示了非常相似的功能，并且更加灵活，也许更容易实现保持.
I'd suggest you to have more object-oriented approach to the task. Please take a look at this JSfiddle, which demonstrates quite similar functionality, and is more flexible and maybe easier to maintain.
这篇关于通过单击Javascript更改多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
