如何使用jQuery实现图片点击切换src（开关状态互转）

先修正HTML的错误 #

你的原始HTML里所有图片使用了相同的id="pic"，这违反了HTML规范（ID必须是唯一标识），会导致JS无法正确选择目标元素。我们需要把重复的ID换成类名，比如toggle-pic：

<img alt="" src="img/1_off.png" class="toggle-pic">
<img alt="" src="img/2_off.png" class="toggle-pic">
<img alt="" src="img/3_off.png" class="toggle-pic">
<img alt="" src="img/4_off.png" class="toggle-pic">
<img alt="" src="img/5_off.png" class="toggle-pic">

jQuery实现切换逻辑 #

通过attr()方法读取和修改图片的src属性，判断当前状态后替换字符串实现切换：

$(document).ready(function() {
  // 给所有切换图片绑定点击事件
  $('.toggle-pic').on('click', function() {
    const $img = $(this);
    const currentSrc = $img.attr('src');
    
    // 根据当前src判断状态，切换对应的路径
    if (currentSrc.indexOf('_off.png') !== -1) {
      $img.attr('src', currentSrc.replace('_off.png', '_on.png'));
    } else {
      $img.attr('src', currentSrc.replace('_on.png', '_off.png'));
    }
  });
});

逻辑说明 #

• $(document).ready()：保证DOM完全加载后再执行JS，避免找不到元素的问题
• $('.toggle-pic').on('click', ...)：批量给所有目标图片绑定点击事件
• $(this)：指向当前被点击的图片，确保只修改当前操作的元素
• indexOf()/replace()：通过字符串判断和替换，实现off和on状态的互转

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