更改“x”变量需要更新2个功能，但只更新一个

我对编程非常陌生，我不知道在哪里寻找这个问题。我的大脑只是没有看到为什么它不起作用的问题。更改“x”变量需要更新2个功能，但只更新一个

我试图更新'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

来源

2017-02-28 Josh Mergens

请张贴的jsfiddle :) –

切下的功能例如我该怎么切下来？我不确定什么是多余的。 –

我得到了一个jsfiddle版本的工作和链接在帖子的底部。 –

在您的按钮单击事件，你需要改变removeClass()到remove()，这将删除以前生成的元素。

而且点击按钮时，您需要在调用之前调用gridGen()boxSize()

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

来源

2017-02-28 01:06:48

这似乎以最简单的方式解决了我的问题，非常感谢！ –

你需要添加盒

之前清空容器

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

本地函数prompt()返回一个字符串，你需要解析ST响成数

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

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

沃金版https://jsfiddle.net/gyr5djhy/1/

来源

2017-02-28 00:42:07 RomanMinkin

更改“x”变量需要更新2个功能，但只更新一个

回答

相关问题