Question

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

当用户在tictactoe磁贴上点击时：
将该图块（div）内的HTML文本更改为用户的marker（X或O）;
将taken的CSS类添加到磁贴;
将用户的得分/移动次数增加1。

这是我试图摆弄的相关Javascript / jQuery代码： var user = { 得分：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

我并不完全清楚（更不用说解析器）你所期望的＆＃34;这个＆＃34;在你的背景下。是你想要的jquery选择元素吗？或者它是用户对象？

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

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

Answer 2

这个处理程序内部代表DOM元素，但是文本和addClass都属于jQuery Object。所以你需要像这样使用它们。

$(this).text(marker)

Answer 3

根据你的提及，我在这里放了一个小小的混蛋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。注意我在上面的代码中更改的终止。那里有一个落后者导致剧本失败。并且在小提琴中取消注释你准备好的用户点击功能。

Answer 4

在}处缺少userClick关注功能;在user.userClick()内致电game.initializeGame();将user.marker和user.score替换为marker，score附加到.click()选择器的.box函数。{/ p>

  // 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

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

4 个答案: