Javascript 多个图像通过单击按钮更改答案

【问题标题】：Javascript multiple image change with button clicksJavascript 多个图像通过单击按钮更改
【发布时间】：2012-10-24 08:18:47
【问题描述】：

好的，这就是我正在尝试做的，之前太模糊了，所以这里有一个更好的解释，请记住，我现在只编写页面大约 2 周，因此感谢任何帮助。

我需要创建一个 HTML/JavaScript 网页，该网页显示三个图像以及每个图像的标题（描述）。对于每个图像，我还需要创建一个按钮，将第一张图像更改为同一主题上的不同图像（并更改标题）。还需要有一个按钮，将所有三个图像恢复为原始图像。

我让编码工作，以便在单击按钮时一个图像会更改为另一个图像，但是当我添加我的第二个和第三个编码时，就没有任何工作了。

<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>

【问题讨论】：

嗨，乍得，欢迎来到 Stackoverflow。您在这篇文章中提到您在之前的问题中“过于模糊”。这个稍微好一点，但我建议您也发布您的代码，或前往 jsfiddle.net 并在您的问题中提供一个示例来解决您遇到的问题。这将加强您的回答，以便我们可以更好地帮助您，您可以获得问题的答案！希望这对您有所帮助，欢迎再次来到 SO！
这是我用于第一个图像切换的编码，然后我尝试在更改 img id 时复制它，它使其余代码停止工作：
thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
@ChadThompson - 通过编辑将代码放入原始问题中
好的，这是我在第一张图片上使用的代码，它运行良好，然后当我尝试复制它并更改 image2 和 image3 的变量名时，整个代码停止工作。

标签： javascript image button

【解决方案1】：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script>
        var dd = 5;
        var cnt = 0;
        function chng() {

            var rotator = document.getElementById('rr');  // change to match image ID
            var imageDir = 'Images/';                          // change to match images folder


            var images = ['2.jpg', '3.jpg', '4.jpg', '5.jpg'];

            cnt++;

            var len = images.length;
            if (cnt < dd) {
                rr.src = imageDir + images[cnt];
            }
            else if (cnt == len) {
                rr.src = imageDir + images[0];
                cnt = 0;
            }
        }

</script>

</head>
<body>
<img src="Images/1.jpg" id="rr" height="500" width="650">

    <input type="button" value=" next. . " onclick="chng()" />
</body>
</html>

【讨论】：

【解决方案2】：

您的页面中存在多个问题：缺少文档类型声明、缺少 title 标记、head 中的实际内容 HTML 和多个 body 标记。除此之外，changeImage() 在每个script 中都被替换为一个新的。最后只有最后一个函数，它将src 更改为#image2。

如果我正确理解了你的问题，你需要这样的东西：

head中的script：

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>

如您所见，路径和标题的数据位于嵌套数组的对象中。这样它们就与实际内容分离，代码更易于维护。

您没有提供图像标题布局的示例，因此我将标题信息放在图像上方的H1 标签中。随意更改元素及其位置。请注意，您还可以在标题文本中使用 HTML 标记。

但是，执行此代码时存在一些限制和 CPU 时间浪费：imageData 由每次单击创建，每个元素只能使用两个不同的路径。

我建议您对任务采用更多面向对象的方法。请看一下这个JSfiddle，它展示了非常相似的功能，并且更灵活，可能更易于维护。

【讨论】：

非常感谢您对编码的关注和帮助，非常感谢。
工作就像一个魅力，我没有意识到我可以将所有 3 个脚本编码为一个，并认为我必须将它们分开，因为布局（正如我所说的那样，这很新），谢谢很多。
谢谢，我想也许我的 JSfiddle 太重了 =)。您是否访问过developer.mozilla.org/en-US，在那里您可以找到有关 JS、CSS、HTML 等的基础知识和高级信息。
如果我要求您接受答案，您介意吗。这样我就获得了一些代表，SO 中的其他人可以看到你的问题已经解决了。
我的错，一个星期没回来看这里但我接受了。