第二次調用已定義的函數不起作用

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的新手，因此可能還會出現其他錯誤，但是現在我需要關注預期的結果。 順便感謝您的快速解答！