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

可能是一个简单的解决方案，但我已经坚持了几天了。我正在构建一个tic-tac-toe项目，我想在我的

user

对象中构建一个名为

userClick（）

的方法，该方法满足以下条件：

• 当用户单击TictaToe互动程序时：
• 将该平铺（

  div

  ）中的HTML文本更改为用户的

  标记（X或O）
  向互动程序添加一个CSS类
  take
  
  将用户的得分/移动计数增加1
  

下面是我尝试处理的相关Javascript/jQuery代码： 变量用户={ 分数：0， 标记：“X”

我的HTML有9个div排列在TictaToe网格中，所有div都有

box

类。我的CSS文件也有一个

take

类，当单击时会更改div的背景颜色。但是，当我单击任何div时，什么都没有发生。我尝试过多次调整函数以使其正常工作，没有luck、 我对闭包、事件处理程序和

这个

绑定仍然缺乏经验，所以也许有经验的人可以为我解释一下

谢谢

---

编辑：这里是到目前为止的整个代码库的一部分，以防有帮助。（有问题的方法从第74行开始）。

我还不完全清楚（更不用说解析器了）您希望“this”在您的上下文中是什么。它是您想要的jquery selected元素吗？还是用户对象

考虑到您正试图向其中添加CSS类，我假设您需要单击的元素。您的处理程序分配应该如下所示：

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

---

我还不完全清楚（更不用说解析器了）您希望“this”在您的上下文中是什么。它是您想要的jquery selected元素还是用户对象

考虑到您正试图向其中添加CSS类，我假设您需要单击的元素。您的处理程序分配应该如下所示：

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

---

这个在处理程序中代表DOM元素，但是text和

addClass

都属于jQuery对象

$(this).text(marker)

---

这个在处理程序中代表DOM元素，但是text和

addClass

都属于jQuery对象

$(this).text(marker)

---

缺少

}

用户点击

处的下列功能；在
game.initializeGame（）中调用
user.userClick（）
；将
marker
和
user.score
替换为
marker
，
中的
score
。单击
选择器附带的函数（）

  // Game functions
  initializeGame: function() {
    user.chooseMarker();
    computer.chooseMarker();
    user.setMarkerInUI();
    user.updateScore();
    computer.setMarkerInUI();
    computer.updateScore();
    user.userClick();
    $('#score strong').text(totalScore);
  }


  // PROBLEM METHOD
  userClick: function userClick() {
    $(".box").click(function() {
      console.log(this, user.marker)
      $(this).text(user.marker);
      $(this).addClass(".taken");
      user.score += 1;
    })
  }

启动plnkr
缺少
}
以下功能在
用户点击
；在
game.initializeGame（）中调用
user.userClick（）
；将
marker
和
user.score
替换为
marker
，
中的
score
。单击
选择器附带的函数（）

  // Game functions
  initializeGame: function() {
    user.chooseMarker();
    computer.chooseMarker();
    user.setMarkerInUI();
    user.updateScore();
    computer.setMarkerInUI();
    computer.updateScore();
    user.userClick();
    $('#score strong').text(totalScore);
  }


  // PROBLEM METHOD
  userClick: function userClick() {
    $(".box").click(function() {
      console.log(this, user.marker)
      $(this).text(user.marker);
      $(this).addClass(".taken");
      user.score += 1;
    })
  }

一开始，我在这里放了一把小提琴，按照你的说法，我要做一个非常简单的jQuery tic tac toe：

HTML

<div id="game_container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

CSS

#game_container {
    width: 140px;
    text-align: center;
}

.box {
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 2px;
    border: 1px solid #CCC;
}

*注：我没有费心清理浮标，因为这只是一个快速的

  // PROBLEM METHOD
  userClick: function userClick(marker) { <--- You have to pass the marker
    marker = "x";  <- That should be the passed marker
    $(".box").click(function() {
      $(this).text(marker).addClass("taken");
      score += 1;
    });
  }
}

//问题方法
userClick:function userClick（marker）{我在这里放了一把小提琴，根据您的介绍，它是一个非常简单的jQuery tic tac toe：

HTML

<div id="game_container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

CSS

#game_container {
    width: 140px;
    text-align: center;
}

.box {
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 2px;
    border: 1px solid #CCC;
}

*注：我没有费心清理浮标，因为这只是一个快速的

  // PROBLEM METHOD
  userClick: function userClick(marker) { <--- You have to pass the marker
    marker = "x";  <- That should be the passed marker
    $(".box").click(function() {
      $(this).text(marker).addClass("taken");
      score += 1;
    });
  }
}

//问题方法
userClick:function userClick（marker）{这是jQuery吗？
。onClick
应该是
。on（'click'，function（）{
或
。在处理程序中单击（function（）{
和
$（this）
可以对单击的元素使用jQuery方法。
这个
是您使用的元素
$（this）
jQuery在使用
时为您将作用域绑定到当前元素。单击（…）
或
。打开（'click'，…）
。您自己的
。onClick（）
函数不会这样做，因此您需要将其显式绑定到所需的作用域。为此，您可以使用
.bind
，或者使用
调用（）
或
应用（）调用它
（这是JS本机函数，不是jQ）是jQuery吗？
。onClick
应该是
。on（'click'，function（）{
或
。在处理程序中单击（function（）{
和
$（this）
可以对单击的元素使用jQuery方法。
这是您使用的元素
$（this）
jQuery在使用
时为您将作用域绑定到当前元素。单击（…）
或
。打开（'click'，…）
。您自己的
。onClick（）
函数不会这样做，因此您需要将其显式绑定到所需的作用域。为此，您可以使用
.bind
，或者使用
调用（）
或
应用（）调用它
（这是JS本机函数，不是jQ）duh，对不起；我只是复制了他的部分，并注意他说的问题，没有检查他的所有代码。在编辑中修复，谢谢！因此我将我的
此
引用更改为
$（此）
，或者尝试分配
$（此）
到变量框并使用
box.text（…）
它仍然不起作用。我想知道，因为单击处理程序中的匿名函数在另一个匿名函数中（分配给我的用户对象的
userClick
属性的值，该方法是否难以确定
标记
和
score
是什么引用？如果是，有什么好的解决方法？@M.Layton您是否在代码中使用
点击
/
或
点击
三个版本——没有一个能正常工作。duh，对不起，我只是复制了他的部分，注意他说的问题，没有检查所有的代码。在编辑中修复了，谢谢！所以我更改了m