[英]Toggling image onclick event inline
使用以下代码段进行管理,使用内联 onclick javascript 事件从第一张图像更改为第二张图像。 我的问题是; 当使用另一个内联 Javascript 事件单击第二个图像时,有没有办法将第二个图像更改回第一个图像? IE。 无需编写函数。
<img class="first-image" src="/first-image.png" onclick="this.src=\\'/second-image.png\\'" alt="my images">
您可以像这样更新代码:
<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">
您可以将两个 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')"
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.