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

这里有一个错误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 2

几个问题：

设置高度和宽度时的斜线是错误的（960除以某事或只是960）
for循环错误：它应该是

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

由于执行时没有.block元素，因此css不会适用。您应该将其移至newGrid

Answer 3

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

此代码

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

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

在你的循环中，你需要for (i = 1; i < x * x; i++)，从1而不是0开始索引，否则你将有一个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中的演示！

使用新的div网格刷新页面

3 个答案: