2017-07-12 57 views
0

好吧,我的意圖是創建一個按鈕,它會彈出一個對話框,詢問您要調整網格的大小,一旦用戶輸入了網格的數量在與前面相同的總空間中生成(應該是960像素),我已經調整了網格的大小,但它不會像以前一樣保留在相同的總空間中,並且如果添加了太多的正方形,它似乎完全嚇壞了,在這裏是鏈接 - https://codepen.io/codeChimp88/pen/zzMrjx的codepen,如果你需要更多的信息讓我知道,任何指針,我應該看看的信息將不勝感激,也任何批評,我應該尋求改善是值得歡迎的(我是一個初學者),代碼如下!Odin項目蝕刻草圖 - 調整大小的網格

HTML -

<h1>Etch a Sketch Pad</h1> 

<div class="cont"> 
<button class="but">Clear Pad</button> 
    <button class="but" id="resize">Resize</button> 
</div> 

<div class="container"> 
</div> 

CSS -

.squares { 
    background-color: black; 
    border: solid 1px black; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 

    color: transparent; 
} 

.black { 
    background-color: black; 
} 

.container { 
    text-align: center; 
    border: solid 20px red; 
    background-color: red; 
    height: 100%; 
    width: 100%; 


} 

h1 { 
    text-align: center; 
    font-size: 50px; 


} 

.but { 
    width: 100px; 
    height: 100px; 
    cursor: pointer; 
    background-color: red; 
    font-size: 20px; 
    margin: 10px; 
    border-radius: 10px; 

} 

.cont { 
    text-align: center; 
    margin: 20px; 

} 

的jQuery -

$(document).ready(function() { 

    var $grid = $('.container'); 

for (i = 0; i < 16; i++) 
{ 
    var row = '<div>'; 

    for (j = 0; j < 16; j++) 
     row += '<div class="squares">' + j + '</div>'; 

    row += '</div>'; 

    $grid.append(row); 
} 

    $('.squares').mouseenter(function() { 
    $(this).css("background-color", "white"); 
    }); 

    $('.but').click(function() { 
    $('.squares').css("background-color", "black"); 
    }); 

    $('#resize').click(function() { 
    $('.squares').remove(); 
    $('.container').append('<table></table>'); 
    var gridsize = prompt('How big would you like to make the grid?'); 


    var $grid = $('.container'); 

for (i = 0; i < gridsize; i++) 
{ 
    var row = '<div>'; 

    for (j = 0; j < gridsize; j++) 
     row += '<div class="squares">' + j + '</div>'; 

    row += '</div>'; 


    $('.squares').width(960/gridsize); 
    $('.squares').height(960/gridsize); 

    $grid.append(row); 

    $('.squares').mouseenter(function() { 
    $(this).css("background-color", "white"); 
    }); 

} 

    }); 




}); 

回答

0

首先,

# Here, you are resizing every squares that already exists on the DOM. 
    #Problem : at this time, you did not appended your row yet, so that $('.squares') does not take into account the .squares existing in your row. 
    $('.squares').width(960/gridsize); 
    $('.squares').height(960/gridsize); 

    $grid.append(row); 

爲了獲得更好的性能,我建議您在for循環外調整您的.squares元素的大小。對於簡單的150x150網格,您將獲得許多秒

$('#resize').click(function() { 
    $('.squares').remove(); 
    $('.container').append('<table></table>'); // Actually you don't use that 
    var gridsize = prompt('How big would you like to make the grid?'); 


    var $grid = $('.container'); 

    for (i = 0; i < gridsize; i++) 
    { 
    var row = '<div>'; 

    for (j = 0; j < gridsize; j++) 
    row += '<div class="squares">' + j + '</div>'; 

    row += '</div>'; 

    $grid.append(row); 

    } 

    $('.squares').mouseenter(function() { 
    $(this).css("background-color", "white"); 
    }); 

    $('.squares').width(960/gridsize); 
    $('.squares').height(960/gridsize); 
}); 

這應該解決您的最後一行問題。

其次,當網格元素太小時,線高就成了問題。

.container div{ 
    line-height: 0 
} 

這應該解決你們之間的空間問題。

最後,事實上你的網格比你想要的要大,這與兩件事情有關:你的廣場上有一個邊框,它增加了一些寬度給你不考慮的元素當你調整你的元素,960/gridsize可能肯定給你一個舍入值,打破你的網格大小

我不能肯定,我得到了你的問題所在,所以告訴我,如果我錯過了什麼

+0

那完全回答了所有的我的問題和排序問題,感謝您花時間! –