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

Question

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

• 当用户点击一个tictactoe tile时：
• 将该磁贴 (div) 内的 HTML 文本更改为用户的 marker（X 或 O）；
• 将taken 的CSS 类添加到磁贴；
• 将用户的得分/移动计数增加 1。

以下是我尝试摆弄的相关 Javascript/jQuery 代码： 变种用户 = { 得分：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 绑定仍然相当缺乏经验，所以也许有更多经验的人可以为我解释一下。

谢谢！

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

Answer 1

根据您的提及，我在这里为一个非常简单的 jQuery tic-tac-toe 设置了一个小提琴：https://jsfiddle.net/6ynyr7hx/

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>

jQuery

$(function() {

    var marker_count = 1;
    $('.box').click(function() {
        if (marker_count === 9) {
            $('#game_container').append('GAME OVER');
        }
        if (marker_count % 2 === 00) {
            marker = "X";
        } else {
            marker = "O";
        }
        $(this).text(marker).addClass("taken");
        //Increment the counter
        marker_count = marker_count + 1;
    });
});

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;
    });
  }
}

你需要在改变转弯等时来回传递标记状态和分数......这至少让你更接近使用它。还要删除所有包含 js 的 html 头代码，然后使用 javascript 面板齿轮图标包含 jquery x.x.x 并将其设置为 onDomready。请注意我在上面的代码中更改的终止符。那里有一个落后者导致脚本失败。并在小提琴中取消注释您准备好的 userClick 函数。

Answer 2

在userClick 处缺少} 关注函数；在game.initializeGame() 内拨打user.userClick()；将user.marker 和user.score 替换为marker、score 内的.click() 函数附加到.box 选择器。

  // 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 https://plnkr.co/edit/cAOj0Xa0rcNucM9lft1G?p=preview

Answer 3

处理程序中的 this 代表 DOM 元素，但 text 和 addClass 都属于 jQuery Object。所以你需要像这样使用它们。

$(this).text(marker)

Answer 4

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

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

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