javascript - 单击时如何为此添加新值

大家好

我才刚刚开始学习一些编程知识，并且被困在一个小的测试项目中。

我要这样做，以便当我单击一个棋子时，可以将其添加到棋盘中。

第一部分工作正常，我也可以轻松移动它。

但是，当我想添加更多块时，会将它们全部添加到板的1个图块中。

这个变量会添加我单击的每个img，而不仅保存我单击的最后一个：

var pawnToAdd = this;

这是一段代码，我在这里做错了什么？

$(document).ready(function(){
  $('img').on('click', function(){
    var pawnToAdd = this;
    console.log(pawnToAdd);

  $('.tile').on('click', function(){
    console.log(this);
    this.append(pawnToAdd);
   });
  });
});

最佳答案

$(document).ready(function() {
  var pawnToAdd = null;

  $('img').on('click', function() {
    //set the pawn to add
    pawnToAdd = this;
  });

  $('.tile').on('click', function() {
    //do nothing if no pawn has been clicked yet
    if (pawnToAdd != null) {
      this.append(pawnToAdd);
      //clear out the pawn reference so the user has to click another one
      pawnToAdd = null;
    }
  });
});