用新的div網格刷新頁面

我正在嘗試製作一個divs網格，當mouseentered改變顏色時。然後，點擊一個按鈕並輸入新數字，然後生成一個邊長爲多個div的新網格。我是新來的JavaScript和jQuery，不知道爲什麼我的代碼不會生成div。用新的div網格刷新頁面

，這裏是我的腳本

$('.block').mouseenter(function() { 
    $(this).css('background-color', 'black'); 
}); 

function newGrid(x) { 
    for (i = 0; i > x * x; i++) { 
     $('.container').append('<div class="block"></div>'); 
    } 
    $('.block').height(960 /); 
    $('.block').width(960 /); 
} 

function clearContainer() { 
    $('.block').remove(); 
} 

function askGrid() { 
    var num = prompt("enter box length"); 
    clearContainer(); 
    newGrid(num); 
} 

function firstGrid() { 
    newGrid(16); 


    $('#reset').click(function() { 
     askGrid(); 
    }); 
} 

$(document).ready(firstGrid);

，這裏是我的CSS

.container { 
    margin: 30px auto 0px auto; 
    height: 960px; 
    width: 960px; 
    border: 1px solid black; 
} 
.block { 
    border:0px; 
    margin:0px; 
    padding:0px; 
    float:left; 
    background-color: yellow; 
} 
#reset { 
    display:block; 
    padding:5px 20px; 
    margin:0 auto; 
}

HTML有一個CSS復位和身體，我有id爲「重置」，並與一流的DIV按鈕=」集裝箱「

謝謝！

來源

2015-03-24 Gabriel Horn

幾個問題：

斜槓設置高度時和寬度是錯誤的（或者是960的東西或者只是960分）
for循環是錯誤的：它應該是

for (i = 0; i < x * x; i++)

而css的東西是不會適用的，因爲執行時沒有.block元素。你應該把它移動到newGrid

來源

2015-03-24 22:48:01 Gonfva

非常感謝！在腳本的副本中，'X'意外地從960 /中排除了。這完美的作品。這三件事情都需要修正。 – 2015-03-26 03:27:52

這裏有個bug for (i = 0; i > x * x; i++)應該是i < x。和IM不知道這是什麼

$('.block').height(960 /); $('.block').width(960 /);

你可以在CSS

你也需要這個爲mouseenter事件分別設置高度和寬度工作

$('.container').on('mouseenter','.block',function() { 
    $(this).css('background-color', 'black'); 
});

由於添加的項目是動態的。

來源

2015-03-24 22:43:53

歡迎來到jquery，一個興奮和痛苦的世界！

此代碼

$('.block').mouseenter(function() { 
    $(this).css('background-color', 'black'); 
});

在運行時綁定懸停功能，頁面上的所有現有.block元素。它位於腳本的頂部，因此它會執行一次，並在頁面加載時將此屬性綁定到所有的.block元素，但不會對之後創建的.block元素進行綁定。要解決這個問題，請將其添加到「newGrid」函數中，以便在創建時重新綁定每個新元素。

在你的循環中，你想要for (i = 1; i < x * x; i++)，從1開始索引而不是0，否則你會得到一個錯誤並創建一個額外的盒子。

要設置.block的正確高度，你想分割你的。容器的dimentions由X，塊的大小：

$('.block').height(960/x); 
$('.block').width(960/x);

以下是通用的編程技巧：

作爲一個很好的做法，功能應該有一個具體的工作，只是做的工作。我將clearContainer調用移到了newGrid中，因爲它應該是構建清除舊網格的新網格的函數，而不是稱爲askGrid的函數。 askGrid應該按照它的名稱進行操作，並且只詢問您的新網格維度。
您應該對通過askGrid收到的號碼進行驗證。如果用戶輸入的內容不是數字或負數，或者0，則不應該開始製作盒子，否則newGrid會中斷。我添加了一個循環來繼續詢問大小，直到提供了適當的維度，但是您可以選擇您的行爲。
我將變量「x」更改爲「block_length」，因爲變量應該給出名稱，表示它們的意思，這樣就不會有一堆神祕的變量遍佈整個稱爲x，y，z的地方，您可以一眼就看不出他們的意思。

演示this fiddle！

來源

2015-03-24 23:53:25 kal

這確實得到了原來的16x16網格形式，這很好，但是在右下角有一個缺失的網格，而'重置'按鈕不適用於具有提示編號參數的網格。 – 2015-03-26 03:24:21

用新的div網格刷新頁面

回答

相關問題