Question

程序当前在dev工具中运行时没有错误。除了代码的最后一部分，一切都在表现。我在提示符中输入输入后容器清除但不允许我使用新设置的变量在其中绘制？

var row=16;
var sizeofsquare=45;

function gridLife() {
  for (var x = 0; x < row; x++){
    for (var y = 0; y < row; y++){
  $("<div class='square'></div>").appendTo(".container");
}
}
}

$(document).ready(function(){
  gridLife();
 $('.square').on('mouseenter', function() {
        $(this).css('background-color', 'black');
      });
});

$(document).ready(function(){
$('.buttons').click(function(){
  $('.container').empty();
  row = prompt ('How many sqaures would you like?');
  sizeofsquare = 720/row;
});
});

Answer 1

问题是您通过调用$('.container').empty()删除了所有方块，但之后没有将它们放回去。在按钮单击处理程序的末尾，您应该再次调用gridLife()以重新生成网格元素。

但是，它仍然无效，因为只有原始方形元素绑定了mouseenter个事件。新广场不再拥有该事件处理程序。您可以再次致电$('.square').on来解决这个问题，但这很麻烦。最好的方法是使用.on()的可选选择器参数，如下所示：

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

现在，.square元素中存在曾的所有.container元素将自动触发相同的事件。

无法重启我的网格循环

1 个答案: