Javascript 使用新的div网格刷新页面

我试图制作一个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);

html有一个css重置，在主体中有一个id=“reset”按钮和一个class=“container”div

---

谢谢

这里有一个bug（i=0；i>x*x；i++）应该是

i

。 我不确定这是什么

$（'.block'）。高度（960/）；
$（'.block'）。宽度（960/）

您可以在css中分别设置高度和宽度

此外，您还需要执行此操作才能使
mouseenter
事件正常工作

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

由于添加的项目是动态的。
有几个问题：


设置高度和宽度时的斜线错误（要么是960除以某物，要么只是960）

for循环是错误的：它应该是错误的


for（i=0；i


css的东西不会应用，因为执行时没有.block元素。您可能应该将其移动到
newGrid
欢迎来到jquery，一个充满兴奋和痛苦的世界

此代码

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

运行悬停函数时，将其绑定到页面上所有现有的
.block
元素。它位于脚本的顶部，因此将执行一次，在页面加载时将此属性绑定到所有
.block
元素，但不绑定到之后创建的
.block
元素。要修复此问题，请将其添加到“newGrid”函数中，以便在创建每个新元素时重新绑定它们

在循环中，您需要（i=1；i，

，从1而不是0开始索引，否则将出现off by 1错误，并创建一个额外的框

要设置.block的正确高度，您需要将.container的尺寸除以x，即块的大小：

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

以下是一般编程技巧：

• 作为一种良好的实践，职能部门应该有一个特定的工作，并且只做该工作。我将clearContainer调用移到了newGrid内部，因为构建新网格的函数应该清除旧网格，而不是名为askGrid的函数。askGrid应该按照它的名称执行，并且只要求您的新网格维度
• 您应该对通过askGrid接收的号码进行验证。如果用户键入的内容不是数字、负数或0，则不应开始制作方框，否则newGrid将中断。我添加了一个循环，在提供合适的尺寸之前，不断询问尺寸，但您可以选择自己的行为
• 我把变量“x”改为“block_length”，因为变量应该有名称来表示它们的意思，这样就不会有一堆神秘的变量在x，y，z这个地方，你一眼就看不出它们的意思

---

演示

这确实使原来的16x16网格形成，这很好，但右下角缺少一个，并且“重置”按钮不适用于带有提示号参数的网格。非常感谢！在脚本副本中，960/中意外遗漏了一个“x”。这很好用。这三件事都需要解决。

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