Javascript 事件处理程序 `this` 闭包内的绑定(bind)不起作用

Question

可能是一个简单的修复，但我已经坚持了几天了。我正在构建一个 tic-tac-toe 项目，我想在我的 user 对象中构建一个名为 userClick() 的方法，该方法满足以下条件:

• 当用户点击井字棋图 block 时:
• 将该图 block (div) 内的 HTML 文本更改为用户的标记(X 或 O)；
• 将 CSS 类 taken 添加到图 block ；
• 将用户的得分/移动计数增加 1。

这是我尝试摆弄的相关 Javascript/jQuery 代码: var 用户 = { 得分:0， 标记:“X”，

userClick: function() {
  $('.box').onClick(function() {
    this.text(marker);
    this.addClass('taken');
    score += 1;
  });
};

我的 HTML 有 9 个 div，排列在 tictactoe 网格中，所有 div 都有 box 类。我的 CSS 文件还有一个 taken 类，它会在单击时更改 div 的背景颜色。然而，当我点击任何一个 div 时，什么也没有发生。我尝试对该函数进行多次调整以使其正常工作，但没有成功。我对闭包、事件处理程序和 this 绑定(bind)仍然相当缺乏经验，因此也许有更多经验的人可以为我阐明这一点。

谢谢!

编辑:这是一个 JSFiddle到目前为止的整个代码库，以防有帮助。 (有问题的方法从第 74 行开始)。

Answer 1

我(更不用说解析器)并不完全清楚您期望“this”在您的上下文中是什么。是你想要的jquery选择元素吗？或者是用户对象？

鉴于您正在尝试向其中添加 CSS 类，我假设您想要单击的元素。您的处理程序分配应如下所示:

$('.box').on('click', function() {
    var box = $(this); // refers to the clicked element
    box.text(marker);
    box.addClass('taken');
    score += 1;
  });