切换图像onclick事件内联

Question

使用下面的代码片段管理，使用内联onclick javascript事件从第一个图像更改为第二个图像。我的问题是;是否有办法改变第二个图像回到第一个图像时，点击第二个图像与另一个内联Javascript事件?ie。无需编写函数

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

Answer 1

你可以这样更新你的代码:

<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">

下面是一个工作示例:

<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">

Answer 2

您可以将这两个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')"
/>