用新的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网格刷新页面

回答

相关问题