Question

有了这个，我可以做一个像3x3的网格，但如果我想要一个新的它将堆叠在旧网格上，那么我如何删除旧网格，以便我可以看到新的网格？

此示例：我在行和列中键入3并单击按钮，然后将网格设置为3x3。然后我会再次尝试使网格5x5，所以我输入5行到列，但它只是将它堆叠在旧网格上，那么我如何用新网格替换它？

$(document).on("click","#gridBtn",function()
{
    
  

// Cal the size of the Main div 
var mapHeight = $("#theMap").height();  // 400 
var mapWidth = $("#theMap").width();  // 400 

// divide it BY 
var rowsLeft = $("#rowValue").val(); 
var columnsTop = $("#columnValue").val(); 

// Cal the size of the box 
var divideHeight = mapHeight / columnsTop;   // 100 
var divideWidth = mapWidth / rowsLeft;     // 100


for (var i = 0; i < rowsLeft; i++) {
 
         $("#theMap").append('<div class="row" style="height:'+divideHeight+'px; width: auto;"></div>');
    }


for (var i = 0; i < columnsTop; i++) {
 
         $(".row").append('<div class="square" style="height:'+divideHeight+'px; width:'+divideWidth+'px;"></div>');
    }



});

#wrapper {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

#theMap {
  background-color: gray;
  height: 90px;
  width: 90px;
}

.square {
    display: inline-block;
    box-shadow: 0 0 0 1px gold inset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    
  <div id="theMap"></div>
  
  <div id="inputWrapper">
    <input id="rowValue" type="text" placeholder="rows">
     <input id="columnValue" type="text" placeholder="columns">
     <button id="gridBtn">Create grid</button>
  </div>
 
</div>

Answer 1

我只是将$("#theMap").html("");添加到函数的开头，以清除#theMap的内容。这是你想要的吗？

＆＃13;

$(document).on("click","#gridBtn",function()
{
    
$("#theMap").html("");

// Cal the size of the Main div 
var mapHeight = $("#theMap").height();  // 400 
var mapWidth = $("#theMap").width();  // 400 

// divide it BY 
var rowsLeft = $("#rowValue").val(); 
var columnsTop = $("#columnValue").val(); 

// Cal the size of the box 
var divideHeight = mapHeight / columnsTop;   // 100 
var divideWidth = mapWidth / rowsLeft;     // 100


for (var i = 0; i < rowsLeft; i++) {
 
         $("#theMap").append('<div class="row" style="height:'+divideHeight+'px; width: auto;"></div>');
    }


for (var i = 0; i < columnsTop; i++) {
 
         $(".row").append('<div class="square" style="height:'+divideHeight+'px; width:'+divideWidth+'px;"></div>');
    }



});

＆＃13;

#wrapper {
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

#theMap {
  background-color: gray;
  height: 90px;
  width: 90px;
}

.square {
    display: inline-block;
    box-shadow: 0 0 0 1px gold inset;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    
  <div id="theMap"></div>
  
  <div id="inputWrapper">
    <input id="rowValue" type="text" placeholder="rows">
     <input id="columnValue" type="text" placeholder="columns">
     <button id="gridBtn">Create grid</button>
  </div>
 
</div>

＆＃13;

Answer 2

您需要清理之前创建的表＆＃34;在创建一个新的之前，我会尝试类似的东西：

   $("#theMap").val(''); // cleans before append again

   $(".row").val('');  // cleans before append again

如何用新的Grid替换我的Grid

2 个答案: