当我点击第一个突出显示的红色格子棋子时,如何移动该棋子
以下是该HTML文件
选择 | 换行 | 行号
- @model CheckerBoard.Models.HomeModel
- <html>
- <head>
- <title>@Model.PageTitle</title>
- <link href="~/Styles/Home.css" rel="stylesheet" />
- </head>
- <body>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
- <script src="~/Scripts/Home.js"></script>
- <div class="home">
- <div class="board">
- <div class="row">
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- </div>
- <div class="row">
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- </div>
- <div class="row">
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- </div>
- </div>
- </div>
- </body>
- </html>
这是一个css文件
选择 | 换行 | 行号
- .home > .board
- {
- display: table;
- border: 1px solid black;
- }
- .home > .board > .row
- {
- display: table;
- }
- .home > .board > .row > .cell
- {
- width: 80px;
- height: 80px;
- border: 1px solid black;
- display: inline-block;
- }
- .piece
- {
- background-size: 75px 75px;
- background-repeat: no-repeat;
- background-position: center;
- background-origin: content-box;
- }
- .red
- {
- background-image: URL('../images/red.png');
- }
- .black
- {
- background-image: URL('../images/black.png');
- }
选择 | 换行 | 行号
- $(document).ready(function ()
- {
- var cells = $(".cell");
- var colorCount = 0;
- for (var i = 0; i < cells.length; i++)
- {
- var cell = $(cells[i]);
- var isDark = colorCount % 2 == 0;
- var isNextRow = (i + 1) % 8 == 0;
- colorCount += isNextRow ? 2 : 1;
- cell.css("background-color", isDark ? "navy" : "white");
- }
- $(".cell.piece.red").on({
- click: function () {
- $(this).css("background-color", "yellow"); }
- });
- $(".cell.piece.black").on({
- click: function () {
- $(this).css("background-color", "yellow"); }
- });
- $(".cell.piece.red").on({
- click: function () {
- $(this).appendTo(".row.cell"); }
- });
- });
嗨,大家好.我有一个HTML文件、一个CSS文件和一个JavaScript文件.我一直在试图弄清楚,当我点击第一个高亮显示的红色方格时,我将如何将其移动到一个空闲的单元格中.因此,为了清楚起见,当我点击突出显示的第一个红色选中框时,它应该移动到下一个壁橱中未占用的单元格.有人能帮帮忙吗?以下是我到目前为止对JavaScript文件和其他文件的了解.