Question

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

Answer 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>锚点，然后按钮会根据src发送的内容更改<img>的{{1}} <input type="button" onclick="showImg();>"而不是数字我的目标是制定一个紧密基于你已有的解决方案。

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

1 个答案: