Question

这是我的HTML，它创建了一个板，每个单元调用我的JavaScript函数点击创建一个图像。目前，图像在正文中创建，并在表格下可见。我希望它能让你在单击一个单元格时在该单元格中创建图像。

 <pre><div id="board">
   <table>
   <th colspan="3">Infinite Tic-Tac-Toe!</th>
     <tr id="row1">
       <td class="square" onclick="add_X();">
       </td>
       <td class="square v" onclick="add_X();">
       </td>
       <td class="square" onclick="add_X();"></td>
      </tr>
      <tr id="row2">
       <td class="square h" onclick="add_X();"></td>
       <td class="square v h" onclick="add_X();"></td>
       <td class="square h" onclick="add_X();"></td>
      </tr>
      <tr id="row3">
       <td class="square" onclick="add_X();"></td>
       <td class="square v" onclick="add_X();"></td>
       <td class="square" onclick="add_X();"></td>
       </tr>
     </table>
      </div></code>

这是我的JavaScript，其功能是当前在正文中而不是表格中创建图像。

function show_image(src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;

  // This next line will just add it to the <body> tag
  this.appendChild(img); 
};

function add_X(){
  var src = "http://bookriotcom.c.presscdn.com/wp-content/uploads/2013/07/x.png";
  show_image('http://bookriotcom.c.presscdn.com/wp-content/uploads/2013/07/x.png', 60, 60, "X")
};

function add_O(){
  var src = "http://store.hamiltonmarine.com/prodimg/BER-O.JPG";
  show_image('http://store.hamiltonmarine.com/prodimg/BER-O.JPG', 50, 50, "x")
}

我正在尝试创建我自己的tic Tac Toe游戏而没有复制别人，我正在努力让X进入点击的广场。你可以看看我到目前为止管理的内容。 http://terribilis.github.io/Infinite-Tic-Tac-Toe/

Answer 1

function show_image(sender, src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;


  //document.body.appendChild(img); //DO NOT DO THIS.

  //REPLACE WITH BELLOW CODE

   $(sender).append(img);

};

function add_X(){
  var src = "http://bookriotcom.c.presscdn.com/wp-content/uploads/2013/07/x.png";
  show_image($(this),'http://bookriotcom.c.presscdn.com/wp-content/uploads/2013/07/x.png', 60, 60, "X")
};

function add_O(){
  var src = "http://store.hamiltonmarine.com/prodimg/BER-O.JPG";
  show_image($(this),'http://store.hamiltonmarine.com/prodimg/BER-O.JPG', 50, 50, "x")
}

请注意我添加了额外的参数，以获取发件人，因此每次调用add_x或add_o函数时，都必须通过它的发件人，并在show_image函数中使用它来知道你想要哪一行你的img是附加的。

试图将img附加到表的不同部分

1 个答案: