的修改

Question

尝试根据带有警报的JS输入设置 Tic-Tac-Toe 板。警报永远不会出现，HTML永远不会呈现......我错过了什么？

所有HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tic Tac Toe! (and more...)</title>
  <meta name="description" content="Tic Tac Toe">
  <meta name="author" content="SinSysOnline">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="js.js"></script>
  <style>
  body{
    font-family:"Lucida Console", Monaco, monospace;
  }
  td{
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    width:100px;
    height:100px;
    text-align:center;
    font-size:72px;
  }
  td:last-child{
    border-right:none;
    border-bottom:1px solid #000;
  }
  tr:last-child td{
    border-bottom:none;
  }
  </style>
</head>

<body>
<div id="dashboard">
    <input type="text" value="How large is your grid? (default 3)" size="35" />
</div>
<table id="board">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

ALL JS（减去jQuery）

/* Sadly, there is a very well known algorithm to ensure one NEVER loses at
tic-tac-toe. Ties, perhaps, but if you play right you can NEVER LOSE.
I will not institue this cheap shot into my program, and this will be
a computer vs you. I will add in potential moves :-) */

(function($) {
    function create(x){
        var board = [];
        for(var i=0;i<x;i++){
            var tempArr = [];
            for(var j=0;j<x;j++){ tempArr[j] = ""; }
            board.push(tempArr);
        }
        $('#board tr').clone(x);
        return board;
    }
    var x = prompt("How large would you like your grid? (3-10)");
    var board = create(x);
})(jQuery);

我尝试将JS添加到我身体的底部......这里有点混乱。我知道JS内外......除了DOM操作......

Answer 1

的修改

如果我现在不停止，我永远不会停止。无论如何我都被卡住了。希望这能帮到你的路。仍然需要一些工作（未定义的引用），但如果我的幻想不会分散我的注意力，那么它是有用的：

JS Fiddle Demo (not working)

使用Javascript：

(function (window, document, $) {
    var $board = $('#board');
    var x = parseInt(prompt("How large would you like your grid? (3-10)"), 10);
    var taken = [];
    create(x);
    function create(x) {
        var tmp;
        var $tr = $('<tr/>');
        var $td = $('<td/><td/><td/>');
        if (x <= 10 && x >= 3 && typeof x === 'number') {
            for (var i = 0; i < x; i++) {
                tmp = $tr.append($td);
                tmp.clone().appendTo($board);
            }
            $('#board').on('click', 'td', function (evt) {
                var e = evt || window.event;
                var y = $(this).index();
                var z = $(this).parent('tr').index();
                taken = (!taken) ? [y, z] : taken;
                userChoice(y, z, x, this);
            });
        } else {
            alert('You entered an incorrect value.  Try again!');
            return false;
        }
    }

    function userChoice(y, z, x, el) {
        //if($(el).text() !== "") {
        console.log(taken);
        for (var d = 0; d < (x - 1); d++) {
            for (var o = 0, n = 0; o < 3; o++) {
                if ((taken[n].indexOf(y) && taken[n].indexOf(z)) || (taken[n].indexOf(y) && taken[n].indexOf(z))) {
                    alert('Already played that spot.  Nice try.');
                    return false;
                }
                n++;
            }
        }
        taken.push([y, z]);
        $(el).text('O');
        console.log(taken);
        if ((taken.length * taken[taken.length].length) / (x - 1) === 3) {
            alert('No more spaces!  Game over!');
            return false;
        }
        compChoice(x);
    }
    function compChoice(x) {
        console.log(taken);
        var a = Math.floor(Math.random(10) * x);
        var b = Math.floor(Math.random(10) * x);

        for (var d = 0; d < (x-1); d++) {
            for (var o = 0, n = 0; o < 3; o++) {
                if ((taken[n].indexOf(a) && taken[n].indexOf(b)) || (taken[n].indexOf(a) && taken[n].indexOf(b))) {
                    compChoice(x);
                }
                n++;
            }
        }
        taken.push([a,b]);
        console.log(taken);
        $board.find('tr:nth-of-type(' + a + ')').find('td:nth-of-type(' + b + ')').text('X');
        if ((taken.length * taken[taken.length].length) === x) {
            alert('No more spaces!  Game over!');
            return false;
        }
    }
})(this, this.document, jQuery, undefined);

HTML：

<div id="dashboard">
    <noscript>
        <input type="text" value="How large is your grid? (default 3)" size="35" />
    </noscript>
</div>
<table id="board"></table>

Answer 2

你没有用克隆元素做任何事情！

如果要动态生成表

代码应该是这样的

var $board = $('#board');
var td = "<td></td>", $tr = $("<tr></tr>");
function create(x) {
    $board.empty();
    var arr = [];
    for(var i = 0; i < x; i++) {
        arr.push(td);
    }
    var $trCloned = $tr.clone().append(arr.join(''));
    for(var j = 0; j < x; j++) {
        $board.append($trCloned);
    }
}

Answer 3

这是the fiddle

// JQuery

function create(board, x)
{
    var row = $("<tr></tr>");
    var i;
    for (i = 0; i != x; i++) row.append ($("<td>x</td>"));     // create a row
    for (i = 0; i != x; i++) $('#'+board).append(row.clone()); // then the board
}

// sample use

var x = window.prompt ("How much, boss?");
create('board', x);

// html

<table id='board' />

我在单元格内放了一个'x'，这样就可以看到电路板了

Answer 4

正如Fiddle所做的那样，这个无提示问题更像是环境/兼容性/拼写错误问题。问题可以逐步解决。

jQuery的clone（）函数被滥用，clone（）函数接受布尔类型（http://api.jquery.com/clone/），这意味着是否将复制事件处理程序。从代码中我猜这不是你想要的。请更正并重试。
您在哪个浏览器上测试过？此问题是在某个特定浏览器上发生的，还是在计算机中的所有浏览器上发生？如果是后者，则将您的代码（复制文件，而不是重新输入）复制到其他人的计算机上，然后重试。
简化JS代码并逐步测试。首先，只需离开prompt（）行并删除所有其他内容，它会起作用吗？然后，添加一个空的create（）函数，然后重试。然后，添加更多内容。迟早，你会找到引起问题的那条线。

如果您提供上述实验并找到新内容，请告知我们。

使用JS克隆HTML元素

4 个答案:

的修改

JS Fiddle Demo (not working)

使用Javascript：

HTML：