如何使用全局布尔变量实现按钮切换两张图片的功能

你可以通过定义一个全局布尔变量来追踪当前显示的图片状态，不用再依赖图片URL的字符串匹配，逻辑更简洁可靠。具体实现如下：

1. 声明全局布尔变量
   在函数外部定义一个变量，用来标记当前是否显示默认图片（比如cabato.jpg），初始值设为true，对应页面加载时默认显示的图片。

2. 修改切换函数逻辑
   在切换函数里，根据全局变量的状态设置图片的src，之后翻转变量的布尔值，为下一次切换做准备。

完整代码示例：

<!-- HTML部分 -->
<img id="imahe" src="images/cabato.jpg" alt="切换图片">
<button onclick="yourFunction()">切换图片</button>

<script>
// 全局布尔变量，标记当前是否显示cabato.jpg
let isShowingCabato = true;

function yourFunction() {
  const displayImage = document.getElementById('imahe');
  
  if (isShowingCabato) {
    // 当前显示cabato，切换到nin
    displayImage.src = 'images/nin.jpg';
  } else {
    // 当前显示nin，切换回cabato
    displayImage.src = 'images/cabato.jpg';
  }
  
  // 翻转状态，为下一次切换做准备
  isShowingCabato = !isShowingCabato;
}
</script>

这种方式的优势 #

• 避免字符串匹配的潜在问题：如果图片URL带域名、查询参数或者路径变动，match()方法可能失效，而布尔变量的状态追踪更稳定。
• 逻辑更直观：直接通过变量状态判断切换目标，代码可读性更高。

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