jQuery removeClass and addClass

Question

我在网站上工作，以便在可变大小的棋盘上玩游戏。我正在 for 循环中创建它，它以我想要的方式工作，除了更改和删除单击侦听器中的类。应该发生的是应该删除类"空"，然后添加"黑色"或"白色"，然后应用正确的CSS。我添加了 console.log(( 语句，我得到了我期望的，但类保持不变(addClass 和 removeClass 都没有做任何事情(。我添加了返回 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;
}

Answer 1

我的英语一点也不好。

你不能在圆圈上写相同的"id"attr。单击圆圈时它不起作用。

然后像这样改变。

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

Answer 2

不要在 for 循环中使用 click 函数，而不是使用 genral 类.circle，如下所示ID，

$(document).on('click', '.circle', function() {
$(this).removeClass("empty");
$(this).addClass('red');
console.log(`${$(this).attr('id')} - ${$(this).attr('class')}`);
});
for(var j = 0; j < 5; j++) {
$('#wrapper').append(`<div id="${j}" class="circle empty">Click Me</div>`);    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper"></div>