Question

这是我第一次在这里发帖，虽然我已经浏览了很长时间。说，我希望不要违反任何规定等。无论如何，ad rem：

我正在编写这段jQuery代码，它用很多小div填充包装div，创建一个网格。这一切都在开始时工作正常，我为它创建了一个函数，第一次调用它工作正常。但是，当我使用带有click（）事件处理程序的按钮时，我想再次调用该函数并使用不同大小的div重新填充网格 - 这是它停止工作的地方。这是我的代码：

 $(document).ready(function () {

      var size = 16;
      var def_width = 960;
      var def_height = 640;

      var populate = function (size) {
          $('.square').empty();
          for (var i = 0; i < size * size; i++) {
              var $sq = $("<div class='square'></div>");
              $('.wrapper').append($sq)
          };
          return $('.wrapper')
      };

      populate(size);

      $('.square').hover(function () {
          $(this).css('background-color', 'black');
      }, function () {
          $(this).css('background-color', 'white');
      });

      $('#reset').click(function () {
          var new_size = prompt('Please enter a new amount of squares');
          var new_width = def_width / new_size;
          var new_height = def_height / new_size;

          $('.square').css('width', new_width + 'px');
          $('.square').css('height', new_height + 'px');
          populate(new_size);
      });

对populate（）函数的第二次调用似乎不起作用 - 网格仍然有256个正方形，它们较小，因此它们不会完全填充网格。

Answer 1

您正在清空错误的元素，它应该是$('.wrapper').empty();而不是$('.square').empty();

如果你清空方形div，那么它会杀死方形div中的所有元素，这些元素在开始时是空的，但它不会删除它们。然后继续添加更多方块。如果你在包装器上运行为空，那么它将删除包装器中所有预先存在的方形div，你可以添加新的方形div

  var populate = function (size) {
      $('.wrapper').empty();
      for (var i = 0; i < size * size; i++) {
          var $sq = $("<div class='square'></div>");
          $('.wrapper').append($sq)
      };
      return $('.wrapper')
  };

不确定为什么要在此功能中返回$('.wrapper')，但我将其留在那里以防有其他代码使用它

Answer 2

好吧，我的印象是empty（）删除了该选择器的所有元素。所以在我将其更改为.square之后，它给我留下了一个完全空的包装div。以前，它改变了方块的大小，因此它们没有填满网格，买它们仍然在那里。现在它是这样的：我从一个16x16网格的div开始。当用户在侧面输入新的方块时，我需要更改它，例如，它是64x64。

我也不确定是否还要返回包装器，我补充说当我还在努力让这个功能起作用时。它似乎工作，所以我把它留在那里。我一般都是jQuery和JS的新手，所以可能还有其他错误，但是现在我需要关注所需的结果。谢谢快速回答！

对已定义函数的第二次调用不起作用

2 个答案: