jQuery点击事件失效求助：按钮点击无响应问题排查

核心问题：脚本加载顺序错误 #

你的HTML中先引入了imgs.js，再加载jQuery库。但imgs.js里使用了$（jQuery的别名），此时jQuery尚未加载，$处于未定义状态，导致所有jQuery相关的事件绑定代码完全无法执行，按钮自然没有响应。

修复方法：调整脚本引入顺序，先加载jQuery库，再引入imgs.js：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="imgs.js"></script>

其他优化与修复点 #

• 规范代码格式：funcUpdate函数中$('#img').attr('src', index[current - 1]);;多了一个分号，删除多余的分号即可。
• 正确设置按钮禁用状态：jQuery中操作disabled这类布尔属性，应该用prop()方法而非attr()，后者在部分场景下会出现失效问题：

  // 替换原有的attr写法
  if (current == 1) {
      $('.back').prop('disabled', true);
  }
  else if (current == index.length) {
      $('.frwd').prop('disabled', true);
  }
  // 移除禁用状态也用prop更规范
  $('button').prop('disabled', false);
  

• 添加current边界校验：防止点击按钮时current超出数组范围，导致图片加载错误：

  $(document).on('click', '#prev', function(){
      if (current > 1) { // 确保current不会小于1
          current--;
          funcUpdate();
      }
  });
  
  $(document).on('click', '#next', function(){
      if (current < index.length) { // 确保current不会大于数组长度
          current++;
          funcUpdate();
      }
  });
  

• 修复HTML标签错误：你的HTML里存在一个多余的</main>标签，没有对应的<main>起始标签，建议移除该标签或补上<main>包裹内容。

修复后的完整代码示例 #

HTML部分 #

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="imgs.js"></script>
    </head>
    <body>
        <div>
            <img id="img" src="imgs/5.png"/>
            <div class="center">
                <button type="button" class="back" id="frst">🞀🞀</button>
                <button type="button" class="back" id="prev">🞀</button>
                <button type="button" class="frwd" id="next">🞂</button>
                <button type="button" class="frwd" id="last">🞂🞂</button>
            </div>
        </div>
    </body>
</html>

imgs.js部分 #

const index = ['imgs/1.png', 'imgs/2.png', 'imgs/3.png', 'imgs/4.png', 'imgs/5.png'];
let current = index.length;

$(document).ready(function(){
    $(document).on('click', '#frst', function(){
        current = 1;
        funcUpdate();
    });

    $(document).on('click', '#prev', function(){
        if (current > 1) {
            current--;
            funcUpdate();
        }
    });

    $(document).on('click', '#next', function(){
        if (current < index.length) {
            current++;
            funcUpdate();
        }
    });

    $(document).on('click', '#last', function(){
        current = index.length;
        funcUpdate();
    });
});

function funcUpdate() {
    $('#img').attr('src', index[current - 1]);
    $('button').prop('disabled', false);

    if (current == 1) {
        $('.back').prop('disabled', true);
    }
    else if (current == index.length) {
        $('.frwd').prop('disabled', true);
    }
}

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