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

Question

这是我第一次在这里发布信息，尽管我已经浏览了很长时间。 话虽如此，我希望不要违反任何法规等。无论如何，请注意：

我正在编写这段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的新手，因此可能还会出现其他错误，但是现在我需要关注预期的结果。 顺便感谢您的快速解答！