javascript - 使用新的 div 网格刷新页面

Question

我正在尝试制作一个 div 网格，当鼠标输入时它会改变颜色。然后，当单击 a 按钮并输入新数字时，将生成一个边长为那么多 div 的新网格。我是 javascript 和 jQuery 的新手，无法弄清楚为什么我的代码不会生成 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="reset"的按钮和一个带有 class="container"的 div

谢谢!

Answer 1

几个问题:

• 设置高度和宽度时的斜线错误(要么是 960 除以某物，要么就是 960)

• for循环错误:应该是

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

• 并且 css 不会应用，因为执行时没有 .block 元素。你应该把它移到 newGrid