Question

我正在创建一个允许用户输入数字1 - 128的jQuery程序，动态输入的数字会创建一个包含等于用户输入数字的正方形的网格（例如12将创建12列和行）。

我选择使用sweetAlerts而不是常规提示来询问用户输入。当用户输入数字值时，网格会动态创建，但我的colorRandomizer（）函数不再有效。

colorRandomizer（）;当用户将鼠标悬停在方块上时，随机化网格方块的背景颜色。当我使用常规提示时，colorRandomizer（）函数可以正常工作，但是对于sweetAlerts，网格会出现，但我的colorRandomizer（）不起作用。

我已将代码放在下面可能出现问题的位置。

拨打触发按钮：

//random option button click function
    $('#option-random').on('click', function () {

        //calls swal (sweetAlert)
        test();

        // calls colorRandomizer function to give squares random colors on hover
        colorRandomizer();
    });

与sweetAlerts合作：

function test() {
        swal({
            title: "Hello!",
            text: "Enter a number between 1-128 for squares in your grid",
            type: "input",
            showCancelButton: true,
            showConfirmButton: true,
            closeOnConfirm: false,
            animation: "slide-from-top",
            inputPlaceholder: "e.g 12"
        }, function (squares) {
            if (squares >= 1 || squares <= 128) {

        // calls build function to build the grid-table
                buildGrid(squares);

            } else {
                swal("Oops! You didn't enter a number between 1-128");
            }
        });
    }

随机背景颜色的功能（这是停止工作的功能）：

function colorRandomizer() {
        $('.grid_squares').on('mouseover', function () {
            var color1, color2, color3;
            color1 = (Math.floor(Math.random() * 256));
            color2 = (Math.floor(Math.random() * 256));
            color3 = (Math.floor(Math.random() * 256));

            $(this).css({
                "background-color": "rgb(" + color1 + "," + color2 + "," + color3 + ")"
            });
        });
    }; //colorRandomizer

这是构建网格/正方形的函数，这个函数可以工作，但也许我正在寻找引起问题的东西：

// create grid-table
function buildGrid(squares) {

    // assigns square_size to the width of the grid-table and divides it by the squares input from user and - 2 for the squares border size
    var square_size = $('#grid-table').width() / squares - 2;

    // while counter "i" is less or equal to squares user input create div with class .gride_squares and append newly created div to grid-table
    for (var i = 1; i <= squares; i++) {
        for (var j = 1; j <= squares; j++) {
            $('#grid-table').append('<div class="grid_squares"></div>');
        }
        // while counter "j" is less or equal to squares user input create div with class .rows and append newly created div to grid-table; .rows is used to clear the floated .grid_squares in my external css
        $('#grid-table').append('<div class="rows"></div>');
    }
    // assigns width and height css values to .grid_squares
    $('.grid_squares').css({
        'width': square_size,
        'height': square_size
    });
}; // buildGrid

Answer 1

可能swal()是异步的，这意味着colorRandomizer()在test()返回之前执行。由于test()还没有将框放在DOM中，因此随机数发生器找不到要附加的元素。

尝试将colorRandomizer从事件处理程序移动到test（）。

//random option button click function
$('#option-random').on('click', function () {
    //calls swal (sweetAlert)
    test();
});


function test() {
    swal({
        title: "Hello!",
        text: "Enter a number between 1-128 for squares in your grid",
        type: "input",
        showCancelButton: true,
        showConfirmButton: true,
        closeOnConfirm: false,
        animation: "slide-from-top",
        inputPlaceholder: "e.g 12"
    }, function (squares) {
        if (squares >= 1 || squares <= 128) {
            // build the grid-table
            buildGrid(squares);
            // give squares random colors on hover
            colorRandomizer();

        } else {
            swal("Oops! You didn't enter a number between 1-128");
        }
    });
}

jQuery函数无法使用sweetAlerts提示符

1 个答案: