Question

所以我在我的html文件中制作了一个像下面那样的板子，我试图想办法在点击时为每个空方块添加一个图像。每个方块是153pxx153px，我的图像将是150px150px，我希望它在点击时显示在居中的方块中。

 <div id="board">
      <table>
          <tr id="row1">
              <td id=1 class="square"></td>
              <td id=2 class="square v"></td>
              <td id=3 class="square"></td>
          </tr>
          <tr id="row2">
              <td id=4 class="square h"></td>
              <td id=5 class="square v h"></td>
              <td id=6 class="square h"></td>
          </tr>
          <tr id="row3">
              <td id=7 class="square"></td>
              <td id=8 class="square v"></td>
              <td id=9 class="square"></td>
          </tr>
      </table>
  </div>

例如

my board

Answer 1

CSS：

------------------------------------------------
|           Brand      |         Cart          |
------------------------------------------------
|                   Search                     |
------------------------------------------------

使用Javascript：

  td.square {
     width:150px;
     height:150px;
     padding:3px;
     cursor:pointer;
  }

您可以通过使用addEventListener选择更多事件来向任何其他单元格添加更多事件，而不会出现任何问题。

Answer 2

使用Javascript：

var board = document.getElementById('board');

board.addEventListener('click', function(event) {
  var target = event.target;
  if (target.classList.contains('.square')) {
    var img = document.createElement('img');
    img.src = '/image/pic.png'; // path to the image
    target.innerHTML = '';
    target.appendChild(img);
  }
});

CSS：

.square {
  width: 153px;
  height: 153px;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
}

Answer 3

使用这样的函数：

$("td").click(function(ev){
    // Perform your action on click here
    ev.target.innerHTML='<img src="http://placehold.it/50x50">';
});

Click to see a JSFiddle example

更新：如果您只想使用JS，请使用以下内容：

var board = document.getElementById('board');
board.addEventListener('click', function(ev) {
  ev.target.innerHTML='<img src="http://placehold.it/50x50">';
});

Click to see a JSFiddle example

如何在使用纯JavaScript单击时在<div> </div>元素内添加图像？

3 个答案: