Question

我正在尝试按下按钮时重新加载此网格，并根据用户输入调整大小。这是我想出来的，但是按下按钮后我无法加载网格并回答提示。我在这里错过了什么？难道我做错了什么？另外，如果我希望网格保持完全相同的尺寸并且仅在提示后改变网格内的方块数，该怎么办？我该怎么办？

 <html><body></body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="jquery.js"></script></html>

$(document).ready(function () {

    $('body').prepend('<div class="container"></div>')

        for (var i = 1; i < 17; i++) {
        $('.container').append('<div class="row"></div>')
    }

    for (var i = 1; i < 17; i++) {
        $('.row').append('<p>&nbsp;</p>');
    }

    $('.container').before('<div class="button" style="text-align:center"><p>This Is My Test Button</p></div>')

    $('.button').on('click', function () {
        var userAnswer1 = prompt("How wide would you like the grid?");
        if (userAnswer1 > 50) {
            confirm("Sorry, you can't make a grid wider than 50.");
        } else {
            var userAnswer2 = prompt("How tall would you like the grid?");
            if (userAnswer2 > 50) {
                confirm("Sorry, you can't make a grid taller than 50.");
            } else {
                $('.row').remove();
                for (var i = 1; i < userAnswer1; i++) {
                    $('.container').append('<div class="row"></div>')
                }
                for (var i = 1; i < userAnswer2; i++) {
                    $('.row').append('<p>&nbsp;</p>');
                }
            }
        }
    });

    $('.row').css({
        margin: '0',
        padding: '0',
    });

    $('.row p').css({
        display: 'inline-block',
        margin: '0',
        padding: '0',
        background: 'white',
        border: '1px black solid',
        height: '25px',
        width: '25px',
    }).mouseenter(function () {
        $(this).css('background-color', 'black')
    });

    $('.button p').css({
        width: '436px',
        height: '25px',
        border: '1px solid #18ab29',
    }).mouseenter(function () {
        $(this).css('background-color', 'gray')
            .mouseleave(function () {
            $(this).css('background-color', 'white')
        });
    });

});

单击按钮时重载JavaScript方法

0 个答案: