js鼠标点击实现图标替换代码

在JavaScript中，你可以通过监听元素的`click`事件来实现在鼠标点击时更换图标的功能。下面是一个简单的示例，假设你有两个图像元素`icon1`和`icon2`：

<!-- HTML结构 -->
<button id="changeIcon">点击换图标</button>
<img src="icon1.png" alt="" class="hidden" id="icon1">
<img src="icon2.png" alt="" class="hidden" id="icon2">

<style>
.hidden {
  display: none;
}
</style>

// JavaScript代码
document.getElementById('changeIcon').addEventListener('click', function() {
  // 首先隐藏当前显示的图标
  document.getElementById('icon1').classList.add('hidden');
  document.getElementById('icon2').classList.add('hidden');

  // 切换到另一个图标
  if (this.currentSrc === 'icon1.png') { // 如果当前是第一个图标
    this.src = 'icon2.png'; // 更改为第二个图标
  } else {
    this.src = 'icon1.png'; // 否则更改为第一个图标
  }
});

在这个例子中，当用户点击按钮时，会检查当前图片是否是`icon1`，如果是，则更换为`icon2`，反之亦然。注意这里使用了`currentSrc`属性获取当前的源URL，而不是硬编码`src`。