Question

有两个名为mumbai.jpg和delhi.jpg的图像。有两个按钮，当我单击特定按钮时，我想显示特定图像。图像也应显示在同一窗口中。例如。单击“孟买”按钮将显示mumbai.jpg图像。然后，如果我单击“ delhi”按钮，它将在同一帧中显示delhi.jpg，替换掉mumbai.jpg图像。我是HTML初学者，请帮忙。

这是我的代码。

<html>
    <head>
        <title>Image Display Test</title>
        <script type="text/javascript">
            <!--
            function showImage(){
                document.getElementById('1').style.visibility="visible";        
            }
            -->    
        </script>
    </head>
    <body>
        <input type="button" value="Mumbai" onclick="showImage();"/>
        <img id="1" src="mumbai.jpg" style="visibility:hidden"/>

        <input type="button" value="Delhi" onclick="showImage();"/>
        <img id="1" src="delhi.jpg" style="visibility:hidden"/>
    </body>

Answer 1

HTML中的元素必须具有唯一的id（标识符），它们不能具有与您使用的相同的id。

解决此问题的一种方法是将this传递到您的showImage方法中。然后，您可以使用elem.nextElementSibling来获得单击按钮旁边的元素。这将允许您获取图像src，然后可以使用它来设置目标图像/帧的src。

请参见下面的工作示例：

/* Ignore css */
img {
  height: 150px;
  width: auto;
  display: block;
}

<html>

<head>
  <title>Image Display Test</title>
  <script type="text/javascript">
    function showImage(elem) {
      document.getElementById("display-frame").src = elem.nextElementSibling.src;
    }
  </script>
</head>

<body>
  <input type="button" value="Mumbai" onclick="showImage(this);" />
  <img id="1" src="https://images.unsplash.com/photo-1536775904534-7b743734d424?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02d0a675c0da008dc7587a35509ecf69&w=1000&q=80" style="display:none" />

  <input type="button" value="Delhi" onclick="showImage(this);" />
  <img id="2" src="https://images.unsplash.com/photo-1523960666814-f9b47d1e9ed3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="display:none" />
  
  <img id="display-frame"/>
</body>

Answer 2

使用以下代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button-one">Mumbai</button>
        <img id="1" src="http://www.slipperelectrical.co.nz/wp-content/uploads/2015/12/dummy-image.jpg" style="display:none;"/>

        <button id="button-two">Delhi</button>
        <img id="2" src="https://dummyimage.com/vga" style="display:none;"/>

{{1}}

Answer 3

尝试在脚本中删除此<— —>

html，单击特定按钮时需要显示特定图像

4 个答案: