如何在jQuery中实现变量递增10而非1？拖拽游戏积分逻辑问题

需求：将可拖拽图片放入正确的dropzone时，为divResult增加10积分；放入错误区域时，扣除5积分。

修复后的完整代码 #

HTML #

<div class="dragme tekst" data-id="1"><img src="https://picsum.photos/id/1/100" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="2"><img src="https://picsum.photos/id/2/100" alt="" width="100px" height="100px"></div>
<div class="dragme tekst" data-id="3"><img src="https://picsum.photos/id/3/100" alt="" width="100px" height="100px"></div>
<div class="dropzone" data-accept="1"><img src="https://picsum.photos/id/1/150" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="2"><img src="https://picsum.photos/id/2/150" alt="" width="150px" height="150px"></div>
<div class="dropzone" data-accept="3"><img src="https://picsum.photos/id/3/150" alt="" width="150px" height="150px"></div>
<br clear="all" />
<div id="divResult">当前积分：0</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

CSS #

.dropzone {
  border: 1px solid red;
  display: inline-block;
  margin: 0 10px;
}
.dragme {
  display: inline-block;
  margin: 0 10px;
  cursor: move;
}

JavaScript #

$(document).ready(() => {
  let score = 0;
  function updateScoreDisplay() {
    $('#divResult').html(`当前积分：${score}`);
  }
  updateScoreDisplay();

  $('.dragme').draggable({
    revert: true,
    helper: 'clone'
  });

  $('.dropzone').droppable({
    accept: '.dragme',
    drop: function(event, ui) {
      const dragId = ui.draggable.data('id').toString();
      const acceptId = $(this).data('accept').toString();
      
      if (dragId === acceptId) {
        score += 10;
      } else {
        score -= 5;
      }
      updateScoreDisplay();
    }
  });
});

原代码问题及修复说明 #

• 积分未持久化：原代码无全局积分变量，每次拖拽都重新计算，修复后新增score变量跟踪当前积分。
• 无效循环：正确拖拽时的for循环无意义，直接给score加10即可。
• 变量作用域错误：错误分支中i是局部变量，外部无法访问，改用全局score变量计算。
• 数据类型不匹配：data-id返回数字、data-accept返回字符串，统一转为字符串后再比较，避免判断错误。
• 交互体验优化：添加revert: true让拖拽元素放回原位置，helper: 'clone'显示克隆体，提升操作流畅度。
• 代码复用：封装updateScoreDisplay函数统一处理积分显示，减少重复代码。

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