Question

我正在通过Odin项目，试图用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));
    }
});

Answer 1

您应该可以在活动中使用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));
    }
});

输入值不随用户输入而改变

1 个答案: