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

Question

大家好，

我刚刚开始学习一些编程，并且陷入了一个小型测试项目。

我想做到这一点，当我点击一个棋子时，我可以将它添加到棋盘的图 block 中。

第一 block 工作正常，我也可以毫无困难地移动它。

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

这个变量添加了我点击的每一个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);
   });
  });     
});

Answer 1

$(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;
    }
  });
});