0

ユーザーが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
4

1 に答える 1

0

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");
        }
    });
}
于 2015-10-26T01:42:03.527 に答える