如何使用jQuery实现点击按钮循环切换图片源

嘿，我来帮你搞定这个图片循环切换的问题！你的现有代码只能单次切换，是因为每次点击都直接把图片src设为card-light.png，没有判断当前显示的是哪张图，所以第二次点击不会有变化。咱们来修改一下，让它能在两张图之间循环切换：

完整代码示例 #

HTML 部分（保持不变，注意路径一致性） #

<button id="menu-btn">click me</button>
<img id="div1" src="./images/card-dark.png">

修改后的 jQuery 代码 #

// 先定义好两张图片的路径，方便维护和判断
const imageUrls = {
  dark: './images/card-dark.png',
  light: './images/card-light.png'
};

$('#menu-btn').on('click', function() {
  // 获取图片元素的 jQuery 对象
  const $targetImg = $('#div1');
  // 获取当前图片的 src 属性值
  const currentSrc = $targetImg.attr('src');
  
  // 根据当前显示的图片，切换到另一张
  if (currentSrc === imageUrls.dark) {
    $targetImg.attr('src', imageUrls.light);
  } else {
    $targetImg.attr('src', imageUrls.dark);
  }
});

代码解释 #

• 首先我们把两张图片的路径存在一个对象里，这样后续如果要修改路径或者添加更多图片，会更方便维护。
• 每次点击按钮时，先获取当前图片的src属性，判断它现在显示的是哪张图。
• 根据判断结果，把src切换成另一张图的路径——这样就能实现点击一次切换、再点击恢复的循环效果了。

另外要注意：你的原始代码里，jQuery设置的路径是images/card-light.png，而HTML里的初始路径是./images/card-dark.png，最好统一路径格式（都加上./或者都不加），避免因为路径解析问题导致图片加载失败。

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