如何为Div模拟表格的单元格点击交换添加jQuery动画？

嘿，我来帮你搞定这个动画问题！你的核心逻辑是对的，只是在事件绑定方式和jQuery动画调用上踩了几个小坑，咱们一步步来修正：

问题根源分析 #

你之前尝试jQuery动画时崩溃，大概率是这几个原因：

• 没有把原生DOM元素转换为jQuery对象就直接调用animate方法
• 循环里直接用j变量，触发事件时j已经是循环结束后的最大值（作用域陷阱）
• 用eval生成点击函数的写法太绕，容易引发语法或作用域错误

重构后的完整代码 #

下面是修改后的可运行代码，我会逐段标注关键改动：

// 假设pozadina是已获取的DOM容器，odgovor1、odgovor2是你的字符串数组
for (var j = 0; j < odgovor1.length; j++) {
  // 用自执行闭包保存当前循环的j值，避免作用域混乱
  (function(currentJ) {
    for (var i = 1; i < 3; i++) {
      tablica[i][currentJ] = document.createElement("div");
      tablica[i][currentJ].setAttribute("class", "rijecUDrugomDijelu");
      
      // 简化文本内容设置
      if (i === 1) {
        tablica[i][currentJ].textContent = odgovor1[currentJ];
      } else if (i === 2) {
        tablica[i][currentJ].textContent = odgovor2[currentJ];
      }
      
      // 初始化位置，记得加px单位！
      tablica[i][currentJ].style.top = `${228 + 27 * currentJ}px`;
      tablica[i][currentJ].style.left = `${-153 + 110 + 153 * i}px`;
      
      // 只给每行的第一个单元格绑定点击事件（避免重复触发）
      if (i === 1) {
        $(tablica[i][currentJ]).on("click", function() {
          const $cell1 = $(tablica[1][currentJ]);
          const $cell2 = $(tablica[2][currentJ]);
          
          // 获取当前位置的数值（去掉px转为数字）
          const left1 = parseInt($cell1.css("left"), 10);
          const left2 = parseInt($cell2.css("left"), 10);
          
          // 执行平滑交换动画，时长300毫秒可自定义
          $cell1.animate({ left: left2 }, 300);
          $cell2.animate({ left: left1 }, 300, function() {
            // 动画完成后再同步数组内容，保证视觉和数据一致
            const tmp = odgovor1[currentJ];
            odgovor1[currentJ] = odgovor2[currentJ];
            odgovor2[currentJ] = tmp;
          });
        });
      }
      
      pozadina.appendChild(tablica[i][currentJ]);
    }
  })(j); // 把当前循环的j传入闭包保存
}

关键改动说明 #

1. 用闭包解决循环变量作用域问题：
   循环里的j是共享变量，如果直接在点击事件里用j，触发时j已经是循环结束后的最大值了。用自执行函数把j转成局部变量currentJ，就能保证每个点击事件对应正确的行。

2. 正确调用jQuery动画：

   • 先用$(DOM元素)把原生节点转成jQuery对象，才能调用animate方法
   • 动画目标值用数字（比如left2），jQuery会自动补全px单位
   • 把数组交换逻辑放在动画的回调函数里，确保动画完成后再同步数据，避免视觉和数据不一致

3. 简化代码写法：
   用textContent替代createTextNode，代码更简洁；只给每行的一个单元格绑定事件，减少冗余。

额外优化建议 #

如果你的环境支持ES6，可以把var j改成let j，这样就不用闭包了——let会在每次循环创建独立作用域：

for (let j = 0; j < odgovor1.length; j++) {
  for (var i = 1; i < 3; i++) {
    // 这里直接用j就行，不用闭包
    if (i === 1) {
      $(tablica[i][j]).on("click", function() {
        // 逻辑和之前一致，直接用j即可
      });
    }
  }
}

这样修改后，点击单元格就会有平滑的左右移动动画，动画结束后数组内容也会同步更新，不会再出现崩溃问题啦！

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