Question

我想制作一个我需要为学校编码的井字游戏的记分牌，但我正在努力选择桌子的特定部分，然后选择记分板的其余部分。

<h1>Scores</h1>
<table class="rounds-info">
    <tr>
        <td><img width="15" height="15" alt="" title="" src="img/cross.jpg" />&nbsp;Player 1</td>
        <td>0</td>
    </tr>
    <tr>
        <td><img width="15" height="15" alt="" title="" src="img/circle.jpg" />&nbsp;Player 2</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Total rounds</td>
        <td>0</td>
    </tr>

我需要选择赢家的td，可以使用document.winner找到。 document.winner打印输出1或2，具体取决于谁赢了。

并且当玩家赢了它时应该将总轮数增加一个。

我希望有人可以帮助我。

这是整个代码：

<head>
    <title>Boter, Kaas en Eieren</title>

    <link rel="stylesheet" href="css/style.css" />
</head>

<body onload="startGame();">
<div id="mainContainer">

        <h1>Boter, Kaas &amp; Eieren</h1>

        <div id="speelveld">
            <table border="0">
                <tr>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                </tr>
                <tr>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                </tr>
                <tr>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                    <td><img alt="" title="" src="img/empty.jpg" /></td>
                </tr>
            </table>
        </div> <!-- EINDE SPEELVELD CONTAINER -->

        <div id="game-info">
            <h1>Aan beurt</h1>
            <div id="message">Messages here.</div>
            <table class="players-turn" border="0">
                <tr>
                    <td><img width="25" height="25" alt="" title="" src="img/cross.jpg" /></td>
                    <td>Speler</td>
                    <td>1</td>
                </tr>
            </table> <!-- EINDE SPELER AAN ZET TABEL -->

            <h1>Scores</h1>
            <table class="rounds-info">
                <tr>
                    <td><img width="15" height="15" alt="" title="" src="img/cross.jpg" />&nbsp;Speler 1</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td><img width="15" height="15" alt="" title="" src="img/circle.jpg" />&nbsp;Speler 2</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>Aantal rondes</td>
                    <td>0</td>
                </tr>
            </table> <!-- EINDE INFO TABEL -->

            <button class="game-button">Start spel</button>

        </div> <!-- EINDE GAME-INFO CONTAINER -->

    </div> <!-- EINDE MAINCONTAINER -->

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

JavaScript代码是：

var game = document.getElementById('speelveld');
//var squares = game.getElementsByTagName('td');

var squares = document.getElementById('speelveld').getElementsByTagName('img');
var player_images = [ 'img/empty.jpg', 'img/cross.jpg', 'img/circle.jpg' ];

var startGameButton = document.getElementsByClassName('game-button')[0];
var turn_player_number = document.getElementsByClassName('players-turn');

var turn_player_number = document.getElementsByClassName('players-turn')[0].getElementsByTagName('td')[2];
var turn_player_image = document.getElementsByClassName('players-turn')[0].getElementsByTagName('img')[0];

//var roundsInfo = document.getElementsByClassName('rounds-info')[0].getElementsByTagName('td');

startGameButton.addEventListener('click', refreshGame);

for (var i = 0; i < squares.length; i ++) {
    squares[i].addEventListener('click', nextMove);
}

function startGame() {
    document.turn = 1;
    document.winner = null;
    setMessage(document.turn + "e speler begint met spelen.");
    setTurnInfo(document.turn);
}

function setTurnInfo(player){
    turn_player_number.innerHTML = player;
    turn_player_image.src = player_images[player];
    //document.getElementById("message").innerText = msg;
    setMessage("Speler " + document.turn + " is aan de beurt");
}


function setMessage(msg){
    document.getElementById("message").innerText = msg;
}

function nextMove() {
//console.log(document.winner, this.src.search('empty'));
    if (document.winner != null){
        setMessage("Speler " + document.turn + " heeft al gewonnen.")
    } else if(this.src.search('empty') >= 0) {
        this.src = player_images[document.turn];
        //this.src = 'img/' + document.turn + '.jpg';
        switchTurn();
    } else {
        setMessage("Kies een ander speelvak.");
        // setMessage(document.turn);
    }
}

function switchTurn() {
    if (checkForWinner(document.turn)) {
        setMessage("Gefeliciteerd speler " + document.turn + " heeft gewonnen!");
        document.winner = document.turn;
    } else if (document.turn == 1) {
        document.turn = 2;
        setTurnInfo(document.turn)
    } else {
        document.turn = 1;
        setTurnInfo(document.turn)
    }
}


function checkForWinner(player) {
    var result = false;
    if(checkRow(1,2,3, player) ||
    checkRow(4,5,6, player) ||
    checkRow(7,8,9, player) ||
    checkRow(1,4,7, player) ||
    checkRow(2,5,8, player) ||
    checkRow(3,6,9, player) ||
    checkRow(1,5,9, player) ||
    checkRow(3,5,7, player)) {
        result = true;
    }
    return result;
}

function checkRow (a, b, c, player) {
    var result = false;
    if (getBox(a).search(player_images[player]) >= 0 &&
        getBox(b).search(player_images[player]) >= 0 &&
        getBox(c).search(player_images[player]) >= 0){
        result = true;
    }
    return result;
}

function getBox(number) {
    return squares[number - 1].src;
//return document.getElementById("s" + number).innerText
}

function refreshGame(number) {
    for (var i = 0; i < squares.length; i++) {
        squares[i].src = player_images[0];
    }
    document.winner = null;
}

Answer 1

我建议您使用jQuery，它允许您选择带有CSS的HTML dom，如查询。

您应该添加CSS类以帮助您选择所需的HTML。

例如：

 <h1>Scores</h1>
        <table class="rounds-info scores">
            <tr class="player1">
                <td><img width="15" height="15" alt="" title="" src="img/cross.jpg" />&nbsp;Player 1</td>
                <td class="count">0</td>
            </tr>
            <tr class="player2">
                <td><img width="15" height="15" alt="" title="" src="img/circle.jpg" />&nbsp;Player 2</td>
                <td class="count">0</td>
            </tr>
            <tr>
                <td>Total rounds</td>
                <td>0</td>
            </tr>

选择带有玩家1计数的td，用jQuery我做（代码没有经过测试）

var count = parseInt($(".scores .player1 .count").val());
//increase counter
$(".scores .player1 .count").val(count + 1);

修改

如果没有jQuery，您可以使用dcocument.getElementById方法。而不是使用类使用id属性。

警告：您的ID必须是唯一的

<h1>Scores</h1> <table class="rounds-info"> <tr> <td><img width="15" height="15" alt="" title="" src="img/cross.jpg" /> Player 1</td> <td id="countPlayer1">0</td> </tr> <tr> <td><img width="15" height="15" alt="" title="" src="img/circle.jpg" /> Player 2</td> <td id="countPlayer2">0</td> </tr> <tr> <td>Total rounds</td> <td>0</td> </tr>

选择td

var td = document.getElementById('countPlayer1'); var score = parseInt(td.innerHTML); td.innerHTML = score + 1;

小提琴：https://jsfiddle.net/wq1e0n6z/

Answer 2

在纯JS中：我想到的第一个解决方案是将玩家标识符（“玩家1”等1）放到表格中的玩家行中，例如：< / p>

<table class="rounds-info">
            <tr title='1'>
                <td title='name'>John Smith</td>
                <td title='score'>1</td>
            </tr>...

现在您可以访问该行：

var winnerRow = document.querySelectorAll('[title=1]');

并增加第二个td元素的值：

var winnerScore = winnerRow.querySelectorAll('[title=score]');
winnerScore.value = winnerScore.value + 1;

最后，一般建议：学习jQuery，它会让你的生活更轻松。干杯

Javascript选择特定的表部分

2 个答案: