JavaScript未正确处理HTML元素ID导致拖拽匹配错位，如何修复初始化方法

• 从输出的log可知，传入initialize的numbers数组值为[3,1,4,2]，对应s1到s4四个拖拽元素绑定的number值依次是3、1、4、2，比如ID为s2的元素绑定的number值为1
• 当前初始化逻辑给t1到t4四个放置位绑定的number值是1、2、3、4，和拖拽元素的匹配规则不匹配，导致拖拽后校验不通过无法放置
• 现有HTML结构中d列的ID和行内容不对应：第一行d列内容是d3但ID为d1，第二行内容是d1但ID为d2，即使匹配成功样式修改也会出现错位

方案1：仅修改JS初始化逻辑，无需改动现有HTML #

修改initialize方法中放置位的绑定逻辑，同时调整handDrop的样式选择逻辑避免ID错位问题：

function initialize(numbers) {
  copyNumbers = numbers;
  correctCards = 0;
  totalCount = numbers.length;

  for (var i = 0; i < numbers.length; i++) {
    $("#s" + (i + 1))
      .data("number", numbers[i])
      .draggable({
        containment: "#boxstyle",
        cursor: "move",
        revert: true
      });
  }

  // 修正放置位的number绑定，和拖拽元素的数值规则对齐
  for (var i = 0; i < numbers.length; i++) {
    $("#t" + (i + 1))
      .data("number", numbers[i])
      .droppable({
        hoverClass: "hovered",
        drop: handDrop
      });
  }
}

function handDrop(event, ui) {
  var targetMatchNum = $(this).data("number");
  var sourceMatchNum = ui.draggable.data("number");

  if (sourceMatchNum == targetMatchNum) {
    ui.draggable.position({ of: $(this), my: "center", at: "center" });
    ui.draggable.draggable("disable");
    $(this).droppable("disable");
    ui.draggable.draggable("option", "revert", false);

    // 直接取当前放置位所在行的第二列，不需要依赖ID选择避免错位
    const descCol = $(this).parent().next();
    descCol.css({
      "border-top": "1px solid",
      "border-bottom": "1px solid",
      "border-color": "white",
      "background": "#3F5E17",
      "color": "white"
    });
    $(this).css({
      "background": "#3F5E17",
      "color": "white"
    });
    ui.draggable.css({
      "background": "#3F5E17",
      "font-style": "italic",
      "border": "0px solid green",
      "border-right": "1px solid green"
    });

    document.getElementById("resetButton").style.display = "inline";
    document.getElementById("resetButton").style.visibility = "visible";

    speak(ui.draggable.text() + ". " + descCol.text());

    correctCards++;
  }

  if (correctCards == totalCount) {
    jAlert("You did it!", "Congratulations");
    document.getElementById("resetButton").style.visibility = "visible";
  }
}

方案2：修正HTML ID后保持原逻辑 #

如果要保留原有初始化逻辑，先把HTML表格的d列ID修改为和内容对应，比如第一行d列内容为d3则ID改为d3，第二行内容为d1则ID改为d1，同时保证t元素ID和绑定值匹配即可。

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