将div附加到td

时间：2016-01-07 07:07:22

标签： javascript jquery html css

我正在制作蛇和梯子游戏。我想将player1追加到主板上的第一个单元格，但它不能像我预期的那样工作。我需要有关如何解决问题的帮助。enter image description here

这是我使用的代码

var gameBoard = {
  createBoard: function(dimension, mount) {
    var mount = document.querySelector(mount);
    if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
      return false;
    } else {
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
      var table = document.createElement('table'),
        row = document.createElement('tr'),
        cell = document.createElement('td'),
        rowClone,
        cellClone;
      var output;
      for (var r = 0; r < dimension; r++) {
        rowClone = row.cloneNode(true);
        table.appendChild(rowClone);
        for (var c = 0; c < dimension; c++) {
          cellClone = cell.cloneNode(true);
          rowClone.appendChild(cellClone);
        }
      }
      mount.appendChild(table);
      output = gameBoard.enumerateBoard(table);
    }
    return output;
  },
  enumerateBoard: function(board) {
    var rows = board.getElementsByTagName('tr'),
      text = document.createTextNode(''),
      rowCounter = 1,
      size = rows.length,
      cells,
      cellsLength,
      cellNumber,
      odd = false,
      control = 0;
    for (var r = size - 1; r >= 0; r--) {
      cells = rows[r].getElementsByTagName('td');
      cellsLength = cells.length;
      rows[r].className = r % 2 == 0 ? 'even' : 'odd';
      odd = ++control % 2 == 0 ? true : false;
      size = rows.length;
      for (var i = 0; i < cellsLength; i++) {
        if (odd == true) {
          cellNumber = --size + rowCounter - i;
        } else {
          cellNumber = rowCounter;
        }
        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
        cells[i].id = cellNumber;
        cells[i].appendChild(text.cloneNode());
        cells[i].firstChild.nodeValue = cellNumber;
        rowCounter++;
      }
    }
    var lastRow = rows[0].getElementsByTagName('td');
    lastRow[0].id = 'lastCell';
    var firstRow = rows[9].getElementsByTagName('td');
    firstRow[0].id = 'firstCell';
    return gameBoard;
  }
};

window.onload = (function(e) {
  gameBoard.createBoard(10, "#grid");
});

var face1 = new Image()
face1.src = "d1.gif"
var face2 = new Image()
face2.src = "d2.gif"
var face3 = new Image()
face3.src = "d3.gif"
var face4 = new Image()
face4.src = "d4.gif"
var face5 = new Image()
face5.src = "d5.gif"
var face6 = new Image()
face6.src = "d6.gif"

function rollDice() {
  var randomdice = Math.floor(Math.random() * 6) + 1;
  document.images["mydice"].src = eval("face" + randomdice + ".src")
  if (randomdice == 6) {
    alert('Congratulations! You got 6! Roll the dice again');
  }
  return randomdice;
}

function move() {
  $("#firstCell").append("#player1");
}
move();
/*body {
    background-image: url('snakesandladder2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #4f96cb;
}*/

table {
  width: 100%;
}
td {
  border-radius: 10px;
  width: 60px;
  height: 60px;
  line-height: normal;
  vertical-align: bottom;
  text-align: left;
  border: 0px solid #FFFFFF;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
  background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
  background-color: SkyBlue;
}

#game {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#gameBoardSection {
  border: 3px inset #0FF;
  border-radius: 10px;
  width: 65%;
  float: left;
}
#grid {
  z-index: -1;
}
#ladder {
  position: absolute;
  top: 300px;
  left: 470px;
  -webkit-transform: rotate(30deg);
  z-index: 1;
  opacity: 0.7;
}
#bigSnake {
  position: absolute;
  top: 20px;
  left: 200px;
  opacity: 0.7;
  z-index: 1;
}
#player1 {
  border: 1px;
  border-style: solid;
  position: absolute;
}
#diceAndPlayerSection {
  background-color: lightgrey;
  float: left;
  background-size: cover
}
#lastCell {
  background-image: url('rotstar2_e0.gif');
  background-repeat: no-repeat;
  background-size: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="StyleSheet1.css" rel="stylesheet" />
  <script src="jquery-2.1.4.min.js"></script>
</head>

<body>
  <div id="game">
    <div id="gameBoardSection">
      <div id="grid"></div>
      <div id="ladder">
        <img src="oie_eRDOY2iqd5oQ.gif" />
      </div>
      <div id="bigSnake">
        <img src="oie_485727sRN4KKBG.png" />
      </div>
      <div id="player1" style="border: 1px; border-style: solid; position:absolute;">
        <!--style="position: absolute; top: 597px; z-index: 1;"-->
        <img src="humanPiece.png" />
      </div>

    </div>
    <div id="diceAndPlayerSection">
      <div id="reset">
        <button type="button" name="reset">New Game</button>
      </div>
      <div>
        <button type="button" name="reset">Reset</button>
      </div>
      <div>
        <button type="button" name="addPlayer">Add Player</button>
      </div>
      <div id="diceSection">
        <img src="d1.gif" name="mydice" onclick="rollDice()">
      </div>
    </div>
  </div>

  <script src="JavaScript1.js"></script>

</body>

</html>

提前致谢。

2 个答案:

答案 0 :(得分：1)

我建议在这里进行2次更改：

  • 调用<ComboBox x:Name="comboBoxName" ItemsSource="{Binding ItemsList}" SelectedValuePath="Id" DisplayMemberPath="DisplayName" Width="300" FontSize="14.667" SelectionChanged="comboBoxName_SelectionChanged"> 内的move()功能，因为您的主板是在window.onload后创建的，load在创建后获得了DOM。
  • 应该是element #firstCell而不是element-#player1。所以只需将string-#player1包裹在"#player1"内，例如 - $()

更新代码 

$("#firstCell").append($("#player1"));
var gameBoard = {
  createBoard: function(dimension, mount) {
    var mount = document.querySelector(mount);
    if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
      return false;
    } else {
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
      var table = document.createElement('table'),
        row = document.createElement('tr'),
        cell = document.createElement('td'),
        rowClone,
        cellClone;
      var output;
      for (var r = 0; r < dimension; r++) {
        rowClone = row.cloneNode(true);
        table.appendChild(rowClone);
        for (var c = 0; c < dimension; c++) {
          cellClone = cell.cloneNode(true);
          rowClone.appendChild(cellClone);
        }
      }
      mount.appendChild(table);
      output = gameBoard.enumerateBoard(table);
    }
    return output;
  },
  enumerateBoard: function(board) {
    var rows = board.getElementsByTagName('tr'),
      text = document.createTextNode(''),
      rowCounter = 1,
      size = rows.length,
      cells,
      cellsLength,
      cellNumber,
      odd = false,
      control = 0;
    for (var r = size - 1; r >= 0; r--) {
      cells = rows[r].getElementsByTagName('td');
      cellsLength = cells.length;
      rows[r].className = r % 2 == 0 ? 'even' : 'odd';
      odd = ++control % 2 == 0 ? true : false;
      size = rows.length;
      for (var i = 0; i < cellsLength; i++) {
        if (odd == true) {
          cellNumber = --size + rowCounter - i;
        } else {
          cellNumber = rowCounter;
        }
        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
        cells[i].id = cellNumber;
        cells[i].appendChild(text.cloneNode());
        cells[i].firstChild.nodeValue = cellNumber;
        rowCounter++;
      }
    }
    var lastRow = rows[0].getElementsByTagName('td');
    lastRow[0].id = 'lastCell';
    var firstRow = rows[9].getElementsByTagName('td');
    firstRow[0].id = 'firstCell';
    return gameBoard;
  }
};

window.onload = (function(e) {
  gameBoard.createBoard(10, "#grid");
  move();

});

var face1 = new Image()
face1.src = "d1.gif"
var face2 = new Image()
face2.src = "d2.gif"
var face3 = new Image()
face3.src = "d3.gif"
var face4 = new Image()
face4.src = "d4.gif"
var face5 = new Image()
face5.src = "d5.gif"
var face6 = new Image()
face6.src = "d6.gif"

function rollDice() {
  var randomdice = Math.floor(Math.random() * 6) + 1;
  document.images["mydice"].src = eval("face" + randomdice + ".src")
  if (randomdice == 6) {
    alert('Congratulations! You got 6! Roll the dice again');
  }
  return randomdice;
}

function move() {
  $("#firstCell").append($("#player1"));
}
/*body {
    background-image: url('snakesandladder2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #4f96cb;
}*/

table {
  width: 100%;
}
td {
  border-radius: 10px;
  width: 60px;
  height: 60px;
  line-height: normal;
  vertical-align: bottom;
  text-align: left;
  border: 0px solid #FFFFFF;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
  background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
  background-color: SkyBlue;
}
#game {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#gameBoardSection {
  border: 3px inset #0FF;
  border-radius: 10px;
  width: 65%;
  float: left;
}
#grid {
  z-index: -1;
}
#ladder {
  position: absolute;
  top: 300px;
  left: 470px;
  -webkit-transform: rotate(30deg);
  z-index: 1;
  opacity: 0.7;
}
#bigSnake {
  position: absolute;
  top: 20px;
  left: 200px;
  opacity: 0.7;
  z-index: 1;
}
#player1 {
  border: 1px;
  border-style: solid;
  position: absolute;
}
#diceAndPlayerSection {
  background-color: lightgrey;
  float: left;
  background-size: cover
}
#lastCell {
  background-image: url('rotstar2_e0.gif');
  background-repeat: no-repeat;
  background-size: 100%;
}

答案 1 :(得分：1)

您必须放置一个jQuery对象而不是id字符串：

 $("#firstCell").append($("#player1"));

在我看来，你应该将这个move()函数称为onload中传递的回调因为 你试图将一个对象附加到一个未在调用时创建的元素< / em> ：

window.onload = (function(e) {
  gameBoard.createBoard(10, "#grid", move);  // <-----pass it here
});

现在在return之前使用此方法调用它：

var gameBoard = {
  createBoard: function(dimension, mount, move) {
    var mount = document.querySelector(mount);
    if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
      return false;
    } else {
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
      var table = document.createElement('table'),
        row = document.createElement('tr'),
        cell = document.createElement('td'),
        rowClone,
        cellClone;
      var output;
      for (var r = 0; r < dimension; r++) {
        rowClone = row.cloneNode(true);
        table.appendChild(rowClone);
        for (var c = 0; c < dimension; c++) {
          cellClone = cell.cloneNode(true);
          rowClone.appendChild(cellClone);
        }
      }
      mount.appendChild(table);
      output = gameBoard.enumerateBoard(table, move);
    }
    return output;
  },
  enumerateBoard: function(board) {
    var rows = board.getElementsByTagName('tr'),
      text = document.createTextNode(''),
      rowCounter = 1,
      size = rows.length,
      cells,
      cellsLength,
      cellNumber,
      odd = false,
      control = 0;
    for (var r = size - 1; r >= 0; r--) {
      cells = rows[r].getElementsByTagName('td');
      cellsLength = cells.length;
      rows[r].className = r % 2 == 0 ? 'even' : 'odd';
      odd = ++control % 2 == 0 ? true : false;
      size = rows.length;
      for (var i = 0; i < cellsLength; i++) {
        if (odd == true) {
          cellNumber = --size + rowCounter - i;
        } else {
          cellNumber = rowCounter;
        }
        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
        cells[i].id = cellNumber;
        cells[i].appendChild(text.cloneNode());
        cells[i].firstChild.nodeValue = cellNumber;
        rowCounter++;
      }
    }
    var lastRow = rows[0].getElementsByTagName('td');
    lastRow[0].id = 'lastCell';
    var firstRow = rows[9].getElementsByTagName('td');
    firstRow[0].id = 'firstCell';
    move();
    return gameBoard;
  }
};

window.onload = (function(e) {
  gameBoard.createBoard(10, "#grid", move);
});

var face1 = new Image()
face1.src = "d1.gif"
var face2 = new Image()
face2.src = "d2.gif"
var face3 = new Image()
face3.src = "d3.gif"
var face4 = new Image()
face4.src = "d4.gif"
var face5 = new Image()
face5.src = "d5.gif"
var face6 = new Image()
face6.src = "d6.gif"

function rollDice() {
  var randomdice = Math.floor(Math.random() * 6) + 1;
  document.images["mydice"].src = eval("face" + randomdice + ".src")
  if (randomdice == 6) {
    alert('Congratulations! You got 6! Roll the dice again');
  }
  return randomdice;
}

function move() {
  $("#firstCell").append($("#player1"));
}
/*body {
    background-image: url('snakesandladder2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #4f96cb;
}*/

table {
  width: 100%;
}
td {
  border-radius: 10px;
  width: 60px;
  height: 60px;
  line-height: normal;
  vertical-align: bottom;
  text-align: left;
  border: 0px solid #FFFFFF;
  position:relative;          /*<--------add this one required.*/
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
  background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
  background-color: SkyBlue;
}
#game {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#gameBoardSection {
  border: 3px inset #0FF;
  border-radius: 10px;
  width: 65%;
  float: left;
}
#grid {
  z-index: -1;
}
#ladder {
  position: absolute;
  top: 300px;
  left: 470px;
  -webkit-transform: rotate(30deg);
  z-index: 1;
  opacity: 0.7;
}
#bigSnake {
  position: absolute;
  top: 20px;
  left: 200px;
  opacity: 0.7;
  z-index: 1;
}
#player1 {
  border: 1px;
  border-style: solid;
  position: absolute;
}
#diceAndPlayerSection {
  background-color: lightgrey;
  float: left;
  background-size: cover
}
#lastCell {
  background-image: url('rotstar2_e0.gif');
  background-repeat: no-repeat;
  background-size: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="game">
  <div id="gameBoardSection">
    <div id="grid"></div>
    <div id="ladder">
      <img src="oie_eRDOY2iqd5oQ.gif" />
    </div>
    <div id="bigSnake">
      <img src="oie_485727sRN4KKBG.png" />
    </div>
    <div id="player1" style="border: 1px; border-style: solid; top:10px; left:10px; position:absolute;">
      <!-----------------------------------------------------check top left css props--->
      <img src="humanPiece.png" />
    </div>

  </div>
  <div id="diceAndPlayerSection">
    <div id="reset">
      <button type="button" name="reset">New Game</button>
    </div>
    <div>
      <button type="button" name="reset">Reset</button>
    </div>
    <div>
      <button type="button" name="addPlayer">Add Player</button>
    </div>
    <div id="diceSection">
      <img src="d1.gif" name="mydice" onclick="rollDice()">
    </div>
  </div>
</div>

相关问题
最新问题