Question

我正在尝试制作一个Jquery游戏，其中有一个用户定义的表/板，例如3x3,4x4。我已经制作了电路板，但是由于表格单元的动态特性，我无法访问它们：更改它们内部的值并跟踪它们的索引。有没有办法找到单元格索引并找到被单击的单元格，以更改其值？

   <!-- ========================================== Jquery starts here====================================================== -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


    <script>
        var RowStartParam = "<tr>";
        var RowEndParam = "</tr>";
        var TdStartEndParam = "<td></td>"

        var MakeBoard = function () {

            var BoardSize = $('#enterNum').val();
            //alert(BoardSize);
            var BoardRow = RowStartParam;

            for (var i = 0; i < BoardSize; i++) {
                BoardRow += TdStartEndParam;
            }



            BoardRow += RowEndParam;

            //alert(BoardRow);
            for (var j = 0; j < BoardSize; j++) {
                $("#board > tbody").append(BoardRow);
            }


        }

        $(document).ready(function () {

            $("#enterBtn").click(function () {


                MakeBoard();
            });






        });
    </script>

 <style>
        .text-centre {
            text-align: center;
            display: block;
        }
        
        table {
            margin-top: 10px;
            text-align: center;
            border-spacing: 0px;
            border-bottom: 1px solid;
            border-top: 1px solid;
            border-left: 1px solid;
            border-right: 1px solid;
        }
        
        td {
            width: 50px;
            height: 50px;
            border: 1px solid;
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>

    <!-- ============================================================board size input======================================== -->
    <input type="text" placeholder="Enter Size for board" alt="Board size" id="enterNum" />
    <button class="btn" id="enterBtn" type="button">Enter</button>

    <div class="text-centre">

        <table id="board">
            <tbody></tbody>
        </table>

    </div>

</body>

Answer 1

我重写了一下代码，但它基本相同。要回答您的问题，添加了一个委托的onclick事件，它将返回当前单击的行和单元格。希望有所帮助。

http://codepen.io/anon/pen/jEjopy?editors=001

$(document).ready(function () {

  $('#enterBtn').click(function() {
    makeBoard();
  });

  $(this).on('click', 'td', function() {

    var parent = $(this).parent().index()+1;
    var position = $(this).index()+1;

    alert('row = ' + parent + ', cell = ' + position);
  });

});

function makeBoard() {

  var rowstart = '<tr>';
  var rowend = '</tr>';
  var cell = '<td></td>';
  var boardsize = $('#enterNum').val();
  var boardrow = rowstart;

  for (var i = 0; i < boardsize; i++) {
    boardrow += cell;
  }

  boardrow += rowend;

  for (var c = 0; c < boardsize; c++) { 
    $('#board > tbody').append(boardrow);
  }
}

我认为camelCase函数是一个好习惯，但保持变量小写，以便更容易区分。但它最终会成为个人偏好。

Tic tac toe游戏与动态板Jquery

1 个答案: