使用新的 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

Answer 2

for (i = 0; i > x * x; i++) 这里有一个错误，它应该是i < x。 我不确定这是什么

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

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

您还需要这样做才能使mouseenter 事件起作用

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

因为添加的项目是动态的。

Answer 3

欢迎来到 jquery，一个充满刺激和痛苦的世界！

这段代码

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

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

在您的循环中，您需要 for (i = 1; i < x * x; 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不要一眼就知道它们的意思。

this fiddle中的演示！