时间戳

首页 > 解决方案 > 图像按钮更改所有带有类的图像

javascript - 图像按钮更改所有带有类的图像

问题描述

我有一个图像onclick，它将所有图像更改scr为选定的图像，但它不起作用。我没有看到任何问题。

```
<style>
  .mySlides {
    width: 50px;
    height 30px;
  }

  #View-Post-List-1,
  #View-Post-List-2 {
    width: 40px;
    height: 23px;
  }

</style>
<div id="View-Post-Image">
  <img class="mySlides" id="View-Post-Image-1" src="https://static.toiimg.com/thumb/72975551.cms?width=680&height=512&imgsize=881753" style="display: block;" alt="#" />
  <img class="mySlides" id="View-Post-Image-2" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="#" />
</div>
<div id="View-Post-Listing">
  <ul id="View-Post-List">
    <li><img id="View-Post-List-1" src="https://cdn.eso.org/images/screen/eso1625a.jpg" 
       onclick="document.getElementsByClassName('mySlides').src = 'https://cdn.eso.org/images/screen/eso1625a.jpg';" alt="#" /></li>
    <li><img id="View-Post-List-2" src="https://cdn.eso.org/images/screen/eso1322a.jpg" 
       onclick="document.getElementsByClassName('mySlides').src = 'https://cdn.eso.org/images/screen/eso1322a.jpg';" alt="#" /></li>
  </ul>
</div>
```
在那里我做了你想看到的片段，我把它变成了两个，所以这不会是一个长问题。我用一个 id 做了这个，但我想用一个类来做。

标签： javascripthtml

解决方案

我找到了答案。onclick 中的代码很好 - 但其中给出的类 (mySlides) 引用了许多元素。您应该指定另一个类或 id。

示例代码：

<li><img id="img" src="https://lh3.googleusercontent.com/ykuq3KjWWVgwt9fV1zh1ZzAhXJF6pKV5tbUGH0BZIBBP5yIICcavfO-knvLifR1rv0uBiEnlngw=w640-h400-e365" onclick="document.getElementById('img').src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT0iFDhKf3P2tJzwmzFkj9LqE0QkeAwLNfq8g&usqp=CAU'" alt="#"/></li>

推荐阅读