无需单独编写函数 如何用inline onclick实现图片点击来回切换？

实现方案 #

可以实现，无需额外编写独立函数，直接在内联onclick事件中通过三元表达式判断当前src属性做分支切换即可。

修改后的代码如下：

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

逻辑说明 #

每次点击图片时会先校验当前的src属性值：

• 如果匹配第一张图的地址/first-image.png，就切换为第二张图地址/second-image.png
• 如果不匹配（说明当前已经是第二张图），就切回第一张图地址

如果你的站点会自动把相对路径的src补全为完整绝对路径，会导致全等判断失效，可以调整判断逻辑适配：

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

内容的提问来源于stack exchange，提问作者bagarangmeetsruffio