内联切换图像 onclick 事件答案

【问题标题】：Toggling image onclick event inline内联切换图像 onclick 事件
【发布时间】：2021-12-15 06:30:39
【问题描述】：

使用下面的 sn-p 管理，使用内联 onclick javascript 事件从第一张图像更改为第二张图像。我的问题是；当使用另一个内联 Javascript 事件单击第二个图像时，有没有办法将第二个图像更改回第一个图像？ IE。无需编写函数。

<img class="first-image" src="/first-image.png" onclick="this.src=\'/second-image.png\'" alt="my images">

【问题讨论】：

标签： javascript events onclick inline

【解决方案1】：

您可以将两个 url 存储为图像标签的属性，如下所示：

<img
  src="/first-image.png"
  data-src-1="/first-image.png"
  data-src-2="/second-image.png"
  onclick="this.src = this.src === this.getAttribute('data-src-1') ? this.getAttribute('data-src-2') : this.getAttribute('data-src-1')"
/>

【讨论】：

我尝试添加这个并换出图片网址。我还转义了''，因为它是一个 php 文件，但仍然无法正常工作。
这里是工作示例：jsfiddle.net/5tpjf8ws/5

【解决方案2】：

您可以像这样更新您的代码：

<img class="first-image" src="/first-image.png" onclick="this.src==='/first-image.png' ? this.src='/second-image.png' : this.src='/first-image.png'" alt="my images">

这是一个工作示例：

&lt;img class="first-image" src="https://photo-works.net/images/europe-landscape-photo-edited.jpg" onclick="this.src==='https://photo-works.net/images/europe-landscape-photo-edited.jpg' ? this.src='https://thumbs.dreamstime.com/b/landscape-nature-mountan-alps-rainbow-76824355.jpg' : this.src='https://photo-works.net/images/europe-landscape-photo-edited.jpg'" alt="my images"&gt;

【讨论】：

这有效，但前提是我可以添加完整的图像路径。