本文详解如何在 jquery 交互逻辑中正确声明、初始化并按指定数值（如 +10 或 -5）增减计分变量，避免常见作用域与逻辑错误，确保拖拽计分功能稳定运行。
本文详解如何在 jquery 交互逻辑中正确声明、初始化并按指定数值（如 +10 或 -5）增减计分变量，避免常见作用域与逻辑错误，确保拖拽计分功能稳定运行。
在基于 jQuery UI 的拖拽计分游戏中，常见的误区是将计分变量（如 i）定义在事件回调内部或使用循环替代累加逻辑，导致分数无法持续累积、作用域丢失或显示异常。正确做法是：将计分变量声明在事件处理器外部（如 $(document).ready() 作用域内），并使用复合赋值运算符（+= / -=）实现精准步长增减。
以下为优化后的核心代码示例：
$(document).ready(() => {
let score = 0; // ✅ 在闭包顶层初始化计分变量，确保跨多次 drop 操作持久存在
$('.dragme').draggable();
$('.dropzone').droppable({
accept: '.dragme',
drop: function(event, ui) {
const draggableId = ui.draggable.data('id');
const dropzoneAccept = $(this).data('accept');
if (draggableId === dropzoneAccept) {
score += 10; // ✅ 正确：+10 分
$('#divResult').html(`het aantal punten is: ${score}`);
} else {
score -= 5; // ✅ 正确：-5 分
$('#divResult').html(`Jammer, aantal punten aftrek is: ${score}`);
}
}
});
});
? 关键要点说明：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
-
变量作用域必须合理：
score必须定义在drop回调函数之外，否则每次触发drop都会重新初始化为0，导致无法累计； -
避免无效循环：原代码中
for (let i = 0; i 仅执行一次且不读取历史值，纯属冗余，应直接使用 <code>+= 10； -
注意变量引用一致性：
else分支中曾误用未声明的i（应为score），且表达式i - aftrek逻辑错误（应为score -= 5后直接显示score）； -
推荐使用模板字符串：提升可读性与维护性（如
`${score}`）； -
初始化建议：首次加载时可预设初始分数，例如
let score = 0;或从服务端/本地存储恢复。
✅ 最终效果：每次成功匹配（data-id 与 data-accept 相同）得 10 分，失败则扣 5 分，#divResult 实时准确更新总分——真正实现可控步长的动态计分逻辑。
