javascript - jQuery removeClass和addClass

我在一个网站上工作，可以在不同大小的板上玩游戏。我正在for循环中创建它，除了更改和删除Click侦听器中的类之外，它以我想要的方式工作。应该发生的是应该删除“空”类，然后添加“黑色”或“白色”，然后将应用适当的CSS。我添加了console.log（）语句，并且达到了我的期望，但是该类保持不变（addClass和removeClass都不执行任何操作）。我添加return false是因为我看到了另一个问题的建议，但是它似乎没有任何作用。我想念什么？

for(var i = 0; i < dim; i++) { // x
  for(var j = 0; j < dim; j++) { // y
    board.append('<circle id="'+ id +'" class="empty" cx="'+ (start+gap*j) +'" cy="'+ (start+gap*i) +'" r="'+ (radius) +'"/>');

    $(document).on('click', '#'+id, function() {
      console.log("clicked with color " + color);
      console.log(this);
      $(this).removeClass("empty");
      $(this).addClass(color); // I also have tried this with just "white" or "black" instead of a variable
      console.log(this);
      return false;
    });

    id++;
  }
}

当我点击ID = 0的圈子时记录了什么：

<circle id="0" class="empty" cx="8" cy="8" r="4.75">
<circle id="0" class="empty" cx="8" cy="8" r="4.75">

以下是相关的CSS：

circle.empty {
  stroke: none;
  fill-opacity: 0;
}

circle.white {
  stroke: black;
  fill: white;
  fill-opacity: 1;
}

circle.black {
  stroke: black;
  fill: black;
  fill-opacity: 1;
}

最佳答案

我的英语一点也不好。

您不能在圆上写相同的“ id”属性。当您单击圆圈时，它不起作用。

然后像这样改变。

$(document).on('click', '.'+id, function() {
   // some logic here
});