我正在通过Odin Project进行工作，尝试使用jQuery创建“ etch-a-sketch”类型的网站。这个想法是让div的内部带有网格，当鼠标悬停在网格上时，网格正方形会改变颜色。用户还应该能够输入他们想要多少个网格正方形，因此，如果在表单中放置16个，则将获得16x16的网格。
我将初始值设置为16。当我输入其他数字并按“ go”时，该值将更改回16，并且网格保持不变。我要去哪里错了？
谢谢！
相关代码如下：
HTML：
<form>
<label>Enter the width in pixels:</label>
<input id="formbox" type="text" value="16">
<input id="setWidth" class="buttons" type="submit" value="Go!">
<button id="reset" class="buttons" type="reset">Reset</button>
</form>
JS：
$('#setWidth').click(function () {
$('.box').css("background-color", "#fff");
$('.box').remove();
var $divWidth = $('#formbox').val();
for (var i = 0; i < $divWidth; i++) {
$('#canvas').append('<div class="divHolder"></div>');
$('.divHolder').css("height", Math.floor(500 / $divWidth));
}
for(var i = 0; i < $divWidth; i++) {
$('.divHolder').append('<div class="box"></div>');
$('.box').css("width", Math.floor(500 / $divWidth));
$('.box').css("height", Math.floor(500 / $divWidth));
}
});
您应该能够preventDefault()在事件上使用该功能。
此功能停止默认行为（在这种情况下，默认情况下应刷新页面是该行为）。
$('#setWidth').click(function (e) {
e.preventDefault();
$('.box').css("background-color", "#fff");
$('.box').remove();
var $divWidth = $('#formbox').val();
for (var i = 0; i < $divWidth; i++) {
$('#canvas').append('<div class="divHolder"></div>');
$('.divHolder').css("height", Math.floor(500 / $divWidth));
}
for(var i = 0; i < $divWidth; i++) {
$('.divHolder').append('<div class="box"></div>');
$('.box').css("width", Math.floor(500 / $divWidth));
$('.box').css("height", Math.floor(500 / $divWidth));
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句