Question

我仍然在学习所有这些东西，但我现在要做的是用HTML，CSS和＆amp;创建一个Tic-Tac-Toe游戏。的JavaScript。但无论我尝试什么，我的onClick事件都无法正常运行。我只是希望游戏响应玩家的点击，发送点击该功能的图块的标识，以便它知道要更改哪一个，然后更改图块的图像（无论是一个还是一个十字）。

我认为最好的方法是让onClick传递一个不同的参数，具体取决于所点击的拼贴的id，但它告诉我{{1}没有定义，除此之外，必须有一种比我设想的鸡尾酒更容易的方法。感谢您的帮助！：）

HTML：

placeTile()

Javascript功能：

<html>
<head>
    <title> Tic-Tac-Toe </title>
    <link type='text/css' rel='stylesheet' href='Tic-Tac-Toe.css'/>
    <script type='text/javascript' src='JQuery/jquery-1.11.1.js'></script>
    <script type='text/javascript' src='Tic-Tac-Toe.js'></script>
</head>    

<body>
    <div id='game'>
        <div id='container'>
            <div id='board'>
                <div class='emptyTile' id='NW' onClick='placeTile("NW")'></div>
                <div class='emptyTile' id='N' onClick='placeTile("N")'></div>
                <div class='emptyTile' id='NE' onClick='placeTile("NE")'></div>
                <div class='emptyTile' id='W' onClick='placeTile("W")'></div>
                <div class='emptyTile' id='C' onClick='placeTile("C")'></div>
                <div class='emptyTile' id='E' onClick='placeTile("E")'></div>
                <div class='emptyTile' id='SW' onClick='placeTile("SW")'></div>
                <div class='emptyTile' id='S' onClick='placeTile("S")'></div>
                <div class='emptyTile' id='SE' onClick='placeTile("SE")'></div>
            </div>
        </div>

        <div id='scores'>
            <div class='score' id='Score1'> Player 1: <br/> <span id='pOne' class='num'>0</span></div>
            <div class='score' id='Score2'> Player 2: <br/> <span id='pTwo' class='num'>0</span></div>
        </div>
    </div>
</body>

</html>

因为你可以看到我以迂回的方式做这个，但onclick事件应该将div的id传递给函数，然后用于对该div进行所有必要的更改只有并交换当前的玩家。但它非常混乱，我确定如果我能弄清楚如何让一个javascript函数以不同的方式做出不同的反应取决于点击的div ...我可以清理它...

哦，我喜欢代码，但我也讨厌它。它确实令人上瘾。

Answer 1

您可以使用第二组js代码，Javascript函数，并将其放在不同的类中。然后打电话给它。比如说，您将代码放在名为onclick.js的文件中，然后您将以这种形式调用它：

 <script type="text/javascript" src="onclick.js"></script>

如果你放在一个文件夹中，例如它叫做myFolder，那你就打电话给：

 <script type="text/javascript" src="myFolder/onclick.js"></script>

我希望有所帮助。

Answer 2

你已经包含了jQuery，所以按照这个JSFiddle使用click事件。

http://jsfiddle.net/Delorian/3f2tvabo/

$('.emptyTile').click(function () {
    if (currentPlayer == 0) {
        $(this).removeClass('emptyTile');
        $(this).addClass('cross');
        currentPlayer = 1;
    } else {
        $(this).removeClass('emptyTile');
        $(this).addClass('nought');
        currentPlayer = 0;
    }});

除了类之外，您不需要HTML元素上的任何内容来指示图块。

Answer 3

首先placeTile真正需要什么？因为它是从DOM事件中调用的，所以你需要首先给它一个字符串。例如：

function placeTile(tile) {
  tile.removeClass('emptyTile');
  tile.addClass(['nought', 'cross'][currentPlayer]);
  currentPlayer = (currentPlayer + 1) % 2;
}

现在使用事件委派。在父元素上设置单击处理程序，然后查看事件target属性以获取实际单击的元素。

直播：http://jsbin.com/rahaba/1/edit?js,output

var board = document.getElementById('board');
board.addEventListener('click', function(e) {
  if (e.target === e.currentTarget) {
    return; // This is the parent div, we only want the children
  }
  if (e.target.tagName === 'DIV') {
    e.stopPropagation();
    placeTile(e.target);
  }
});

并在jQuery中：

// Notice the extra 'div' selector.
$('#board').on('click', 'div', function() {
  placeTile(this);
});

如何为多个div元素创建单个onclick事件

3 个答案: