Javascript 可单击的网格，每个<；td>；使用onclick方法更改颜色

所以我正在学习如何使用Jquery创建一个可点击的网格，我很难找到如何使每个块在点击时改变颜色。我试图通过addClass方法向每个类添加一个类。我的主要困难是找到每一个合并onclick或changeColor方法的方法

$（'body'）。在（'click'，'td'，changeColor（））上；
函数generateGrid（行、列）{
var grid=“”；
对于（行=1；行
行：您正在执行作为事件处理程序参数传递的函数，因此请删除
（）

然后您将能够在处理程序中使用
此

function changeColor() {
  const $this = $(this);
  if ($this.hasClass("clicked")) {
    $this.removeClass("clicked")
  } else {
    $this.addClass("clicked");
  }
}


$（document.body）.on（'click'，'td'，changeColor）；
函数generateGrid（行、列）{
var grid=“”；
对于（行=1；行
行：这里的问题是，在
td
上的
click
事件出现在页面上之前，您要绑定
click
事件。您需要确保绑定
generateGrid（）
函数底部的
click
函数，如下所示：


函数generateGrid（行、列）{
var grid=“”；
对于（行=1；行
行：
$（'body'）。在（'click'，'td'，changeColor（））；
这个.addClass（“clicked”）；
这个.addClass（）
是一个jQuery方法。
这个
将不是jQuery对象。您需要将它更改为
$（this.addClass（“clicked”）；
或使用
这个.classList.add（'clicked'））
您似乎不熟悉委托事件绑定。这是OP正在使用的，并且对本用例完全有效。请参考个人小调整。如果您使用
document.body
更改
'body'
，您可以避免DOM查找。Noice–让您接近了，但它只是
$（document.body）
function changeColor() {
  const $this = $(this);
  if ($this.hasClass("clicked")) {
    $this.removeClass("clicked")
  } else {
    $this.addClass("clicked");
  }
}