在 Javascript 中使用多个按钮显示不同的图像答案

【问题标题】：Displaying different Images with multiple buttons in Javascript在 Javascript 中使用多个按钮显示不同的图像
【发布时间】：2014-06-04 05:17:25
【问题描述】：

我是 Javascript 的新手，我正在尝试编写一个程序，一次显示一个图像，当按下不同的按钮时，会显示一个新图像来替换旧图像。我希望你们都可以帮助我解决这个问题！

这是我目前所拥有的：

<html>

<body>

<p>My favorite Beers!</p>

<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
    function showImg() {
        var obj = document.getElementById('picture1','picture2','picture3','picture4','picture5','picture6','picture7','picture8','picture9','picture10');      
        obj.className = 'show';
    }

</script>

<body>
<img id="picture1" src="lost abbey.png"class="show">
<input type="button" onclick = "showImg()" value= "Lost And Found">

<img id="picture2" src="stone-gtipa-bottle.jpg" class="hide">
<input type="button" onclick = "showImg('stone-gtipa-bottle.jpg')" value= "Green Tea IPA">

<img id="picture3" src="belching beaver.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Belching Beaver">

<img id="picture4" src="boardwalk_insta.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Karl Strauss">

<img id="picture5" src="el conquistador epa.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Mission Brewery">

<img id="Picture6" src="fallbrook.png" class="hide">
<input type="button" onclick = "showImg()" value= "Fallbrook Brewery">

<img id="Picture7" src='gordon biersch golden ale.jpg' class="hide">
<input type="button" onclick = "showImg()" value= "Gordon Biersch">

<img id="Picture8" src="grumpy bear.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Grizzly Paw">

<img id="Picture10" src="Moderntimes.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Modern Times">

<img id="Picture9" src="lost-abbey-agave-maria1.png" class="hide">
<input type="button" onclick = "showImg()" value= "Agave Maria">

</body>

</html>

【问题讨论】：

你离得不远了，但我认为你让自己太难了。
你有什么问题？

标签： javascript html image button onclick

【解决方案1】：

您可以通过更好的方式来做到这一点（不要预定义所有图像，也不要将它们全部设置为 hide，但无论如何，以下脚本和 HTML 或多或少会满足您的需求。

<script>
function showImg( id ) {
        // hide previously shown image
        for ( i = 1; i < 10; i++) {
            var obj = document.getElementById( "picture" + i );
            if (obj != null)
                obj.className = 'hide';
        }
        var obj = document.getElementById( "picture" + id );      
        if (obj != null)
            obj.className = 'show';
}
</script>
<style type="text/css">
    .show{display:block;}
    .hide{display:none;}
</style>

<p>My favorite Beers!</p>

<img id="picture1" src="lost abbey.png" title="1" class="show">
<input type="button" onclick="showImg(1);" value="Lost And Found">

<img id="picture2" src="stone-gtipa-bottle.jpg" title="2" class="hide">
<input type="button" onclick="showImg(2);" value="Green Tea IPA">

<img id="picture3" src="belching beaver.jpg" title="3" class="hide">
<input type="button" onclick="showImg(3);" value= "Belching Beaver">

<img id="picture4" src="boardwalk_insta.jpg" title="4" class="hide">
<input type="button" onclick = "showImg(4)" value= "Karl Strauss">

<img id="picture5" src="el conquistador epa.jpg" title="5" class="hide">
<input type="button" onclick = "showImg(5)" value= "Mission Brewery">

<img id="picture6" src="fallbrook.png" class="hide">
<input type="button" onclick = "showImg(6)" value= "Fallbrook Brewery">

<img id="picture7" src='gordon biersch golden ale.jpg' class="hide">
<input type="button" onclick = "showImg(7)" value= "Gordon Biersch">

<img id="picture8" src="grumpy bear.jpg" class="hide">
<input type="button" onclick = "showImg(8)" value= "Grizzly Paw">

<img id="picture10" src="Moderntimes.jpg" class="hide">
<input type="button" onclick = "showImg(10)" value= "Modern Times">

<img id="picture9" src="lost-abbey-agave-maria1.png" class="hide">
<input type="button" onclick = "showImg(9)" value= "Agave Maria">

另一种方法是使用单个<img> 锚点，然后按钮将根据<input type="button" onclick="showImg();>" 以src 而不是数字发送的内容更改<img> 的src。
我的目标是制定一个与您已有的密切相关的解决方案。

【讨论】：