Question

我想制作简单的记忆游戏，但首先我必须创建应该包含瓷砖的棋盘。当我删除任何div时，我希望它之后的可用空间保持不变。不幸的是，删除后，所有div都会移动。我知道这里有必要对每个div使用绝对定位，但我不知道该怎么做。

<body>
  <div class="board-container">

  </div>

</body>

html, body {
  padding: 0;
  margin:0;
  background-color: white !important;
  p {
    color: black;
    font-size:10rem;
    text-align:center;
  }
  .board-container {
    width:100%;
    height:500px;
    background-color: red;
    padding:0;
    position: relative;
    p {
      font-size:2rem;
    }
    .board-tile {
      box-sizing: border-box;
      border:1px solid black;
      background-color: yellow;
      display: inline-block;
      width:50px;
      height:50px;
    }
  }
}

function drawBoard(col, row) {
  var tile = ('<div class="board-tile"></div>');
  for(var i=0 ; i< row ; i++ ) {
    for (var j=0 ; j<col ; j++) {

      $('.board-container').append(tile);


    }
      $('.board-container').append('<br />')
  }

}

      drawBoard(5, 4);

https://jsfiddle.net/6r67ceka/4/

Answer 1

不要删除div，只需更改其CSS opacity属性，使其透明。只需在单击正方形时添加如下所示的预制类即可。

＆＃13;

function drawBoard(col, row) {
  var tile = ('<div class="board-tile"></div>');
  for(var i=0 ; i< row ; i++ ) {
    for (var j=0 ; j<col ; j++) {
      $('.board-container').append(tile);
    }
    $('.board-container').append('<br />')
  }
}
    
drawBoard(5, 4);

$(".board-tile").on("click", function(){
  $(this).addClass("hidden");
});

＆＃13;

/* This class will be added to any clicked div, causing
   it to no longer be visible, but still take up space. */
.hidden { opacity:0; }

html, body {
  padding: 0;
  margin:0;
  background-color: white !important;
}

p {
    color: black;
    font-size:10rem;
    text-align:center;
}

.board-container {
    width:100%;
    height:500px;
    background-color: red;
    padding:0;
    position: relative;
}

p {
      font-size:2rem;
}

.board-tile {
      box-sizing: border-box;
      border:1px solid black;
      background-color: yellow;
      display: inline-block;
      width:50px;
      height:50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="board-container"></div>

＆＃13;

Answer 2

您可以使用position: absolute和top＆amp;来计算拼贴的坐标。 left在你的循环中做一些基本的数学运算。

注1：这个解决方案回答了从原始问题中移除div的问题，但如果你不使用绝对位置，IMO Scott Marcus使用不透明度的方法是唯一的解决方案。

注意2：在原始版本中，每次循环都会触摸DOM，不幸的是，这种方法非常昂贵。在以下版本中，我在字符串中创建HTML并仅将其附加到DOM一次。

示例：

let drawBoard = (columns, rows) => {
  let html = '';
  let topInc = 50;
  let top = 0;
  let leftInc = 50;
  let left = 0;
  for (var i = 0; i < rows; i++) {
    top += topInc;
    for (var j = 0; j < columns; j++) {
      left += leftInc;
      let tile = `<div id="${i}${j}" class="board-tile" style="position: absolute; top: ${top}px; left: ${left}px;">${i}${j}</div>`;
      html += tile;
    }
    left = 0;
  }
  $('.board-container').append(html);
};

drawBoard(5, 4);

$('#02').remove();
$('#11').remove();

.board-tile {
  box-sizing: border-box;
  border: 1px solid black;
  background-color: yellow;
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="board-container">
  </div>
</body>

使用jquery删除div的问题

2 个答案: