更新for循环内的javascript对象属性？

Question

I'm making a tic-tac-toe game in javascript and i'm currently trying to get my x's and o's appear when I click on the spaces (divs). 我正在用javascript制作一个井字游戏，我现在正试图让我的x和o出现在我点击空格（div）时。 I have my system so that my ticTacToe() object "game" can update through it's object prototype. 我有我的系统，以便我的ticTacToe（）对象“游戏”可以通过它的对象原型更新。

The problem is since I use a for loop to attach click event handlers to all the divs with the "space" class, I can't access the properties of the "game" object at that scope. 问题是因为我使用for循环将click事件处理程序附加到具有“space”类的所有div，我无法访问该范围内“游戏”对象的属性。 If I use "this" i'd be referring to the div itself. 如果我使用“this”，我指的是div本身。 I've tried making a prototype function and a constructor function to update the "currentPlayer", "board" and "turn" properties of the game object but I can't manage to get the browser to recognize that the properties are in the game object. 我已经尝试制作原型函数和构造函数来更新游戏对象的“currentPlayer”，“board”和“turn”属性，但我无法让浏览器识别属性在游戏中宾语。

HTML HTML

<!DOCTYPE html>
<html>
<head>
  <title>Tic-Tac-Toe</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="js/script2.js"></script>
</head>
<body>

  <div id="gameBoard">
    <h1 id="msg">Welcome to Tic-Tac-Toe</h1>
    <div id="tl" class="space"></div>
    <div id="tm" class="space"></div>
    <div id="tr" class="space"></div>
    <div id="ml" class="space"></div>
    <div id="mm" class="space"></div>
    <div id="mr" class="space"></div>
    <div id="bl" class="space"></div>
    <div id="bm" class="space"></div>
    <div id="br" class="space"></div>
  </div>
</body>
</html>

JS JS

function ticTacToe() {
  this.board = [[0,0,0]
               [0,0,0]
               [0,0,0]];
  this.turn = 0;
  this.currentPlayer = 1;
}

ticTacToe.prototype = {
  status: function(){
    console.log("The number of turns played is " + this.turn +
    " and it is player " + this.currentPlayer + "'s turn.");
  },
  attachClicks: function(){
    var spaces = document.getElementsByClassName("space"),
        player = this.currentPlayer;
    for(var i = 0; i<spaces.length; i++){
      spaces[i].addEventListener('click',function(){
        if(player == 1){
          this.style.backgroundImage = "url('x.png')";
          //Update ticTacToe's turn, player, and board
        }
        else {
          this.style.backgroundImage = "url('o.png')";
          //Update ticTacToe's turn, player, and board
        }
      })
    }
  }
}

var game = new ticTacToe();

window.onload = function(){
  game.attachClicks();
}

Answer 1

Bind another variable to this : 将另一个变量绑定this ：

  attachClicks: function(){
    var game = this;
    var spaces = document.getElementsByClassName("space")
    for(var i = 0; i<spaces.length; i++){
      spaces[i].addEventListener('click',function(){
        if(player == 1){
          this.style.backgroundImage = "url('x.png')";
          //Update ticTacToe's turn, player, and board
        }
        else {
          this.style.backgroundImage = "url('o.png')";
          //Update ticTacToe's turn, player, and board
        }
      })
    }

Then you can refer to game.board and game.currentPlayer in the event listener function to access the current tictactoe object. 然后你可以在事件监听器函数中引用game.board和game.currentPlayer来访问当前的tictactoe对象。

更新for循环内的javascript对象属性？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-12-22 19:53:45

更新for循环内的javascript对象属性？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-12-22 19:53:45

解决方案1
0 已采纳 2016-12-22 19:53:45