Question

我是编程新手，我不知道在哪里查找这个问题。我的大脑只是没有看到为什么它不起作用的问题。

我正在尝试更新按钮单击时的'x'变量，以影响'gridGen'for循环函数以及'boxSize'css函数。 gridGen没有改变，我仍然以默认的16 * 16（256）框结束，但它们的大小与它们需要的大小相同。

编辑：说我在提示符中输入'4'，我的容器div中会有4列方框，但水平行将继续向下移动到总共256列

$(document).ready(function() {
  var x = 16;
    $('#button').mouseup(function() {
      this.blur()
    });
    $('#gridContainer').hover(function fill() {
      $('.gridBox').mouseenter(function() {
        $(this).addClass('fill');
      });
    });
    var gridGen = function() {
      for (var i = 0; i < x * x; i++) {
      var $gridBox = $('<div class="gridBox"></div>');
      $('#gridContainer').append($gridBox);
      }
    };
    var boxSize = function() {
      var size = 640 / x;
      $('.gridBox').css('width', size).css('height', size);
    };
    $('#button').click(function() {
      $('.gridBox').removeClass('fill');
      //i need this to update x in 'gridGen' function
      //only seems to update in 'boxSize' function
      x = prompt('Enter Dimensions', 'square of...');
      boxSize();
      gridGen();
    });
    boxSize();
    gridGen();
});

JsFiddle

Answer 1

您需要在添加框

之前清空容器

var gridGen = function() {
  $('#gridContainer').empty()
    for (var i = 0; i < (x * x); i++) {
      var gridBox = $('<div class="gridBox"></div>');
      $('#gridContainer').append(gridBox);
    }
};

Native function prompt()返回一个字符串，您需要将该字符串解析为Number

p = prompt('Enter Dimensions', 'square of...');

n = parseInt(p, 10)
if (!isNaN(n)) {
  x = n
}

Woking版本https://jsfiddle.net/gyr5djhy/1/

Answer 2

在按钮点击事件中，您需要将removeClass()更改为remove()，这将删除以前生成的元素。

同样在按钮点击事件中，您需要在致电gridGen()之前致电boxSize()

示例：https://jsfiddle.net/gyr5djhy/3/

更改'x'变量需要更新2个函数，但只更新一个

2 个答案: