本文讲解如何在 jquery 事件处理中正确实现变量的自定义步长增减（如每次加 10 分或减 5 分），避免常见误区（如变量作用域错误、循环误用、未初始化等），并提供可直接运行的完整示例。

本文讲解如何在 jquery 事件处理中正确实现变量的自定义步长增减（如每次加 10 分或减 5 分），避免常见误区（如变量作用域错误、循环误用、未初始化等），并提供可直接运行的完整示例。

在 jQuery 开发中，常需根据用户交互动态更新计分变量（如拖放游戏中的得分）。但初学者容易误用 for 循环模拟“加 10”，或忽略变量作用域与初始化问题，导致计分逻辑失效。核心要点是：使用闭包外层声明的持久变量，并通过复合赋值运算符（+= / -=）直接修改其值。

以下为修正后的标准写法：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(document).ready(() => {
  let score = 0; // ✅ 在事件处理器外部声明，确保跨多次 drop 操作持续累加

  $('.dragme').draggable();
  $('.dropzone').droppable({
    accept: '.dragme',
    drop: function(event, ui) {
      const isCorrect = ui.draggable.data('id') === $(this).data('accept');

      if (isCorrect) {
        score += 10; // ✅ 正确：每次成功匹配 +10 分
        $('#divResult').html(`het aantal punten is: ${score}`);
      } else {
        score -= 5; // ✅ 正确：每次错误匹配 -5 分
        $('#divResult').html(`Jammer, aantal punten aftrek is: ${score}`);
      }
    }
  });
});

⚠️ 关键注意事项：

• 禁止在 drop 回调内重复声明 let i = 0：否则每次拖放都会重置分数；
• 删除无意义的 for 循环：原代码 for (let i = 0; i 仅执行一次且 <code>i 为局部变量，无法影响外部状态；
• 确保 HTML 中 #divResult 存在且初始为空，避免首次渲染异常；
• 使用模板字符串（`${score}`）提升可读性，替代字符串拼接；
• 若需限制最低分（如不低于 0），可添加校验：score = Math.max(0, score);

此方案简洁、高效，完全兼容 jQuery UI 的 draggable/droppable 机制，适用于各类基于交互的计分场景。