Question

我正在尝试制作游戏。每次执行时，我都需要增加迭代次数。问题是，如果我使用循环，jQuery动画会一次全部起作用。我需要他们一个接一个地执行。我在这里保留了代码。抱歉，如果时间太长，但我认为这可以解决问题。

<!DOCTYPE html>
<html>

<head>
<title>Examen</title>
<meta charset="utf-8">
<script src="jquery-3.4.1.min.js"></script>
<style>
    td{
        width: 100px;
        height: 100px;
        border: 2px solid black;
        text-align: center;
        vertical-align: middle;
    }

    #td1 {
        background-color: red;
    }

    #td2 {
        background-color: green;
    }

    #td3 {
        background-color: yellow;
    }

    #td4 {
        background-color: purple;
    }

    #td5 {
        background-color: black;
        color: white;
    }

    #td6 {
        background-color: orangered;
    }

    #td7 {
        background-color: blue;
    }

    #td8 {
        background-color: pink;
    }

    #td9 {
        background-color: brown;
    }
</style>
</head>

<body>
<table>
    <tr>
        <td id="td1">1</td>
        <td id="td2">2</td>
        <td id="td3">3</td>
    </tr>
    <tr>
        <td id="td4">4</td>
        <td id="td5">5</td>
        <td id="td6">6</td>
    </tr>
    <tr>
        <td id="td7">7</td>
        <td id="td8">8</td>
        <td id="td9">9</td>
    </tr>
</table>
<br>
<script>
    var num = new Array(5);
    for (var i = 0; i < 5; i++) {
        num[i] = Math.ceil(Math.random() * 9);
    }

    /* for(var j=0; j<5; j++){
         $("#td"+num[j]).animate({ opacity : 0.0},1500,function(){
             $("#td"+num[j]).animate({ opacity : 1.0},1500);
         });
     }*/

    $("#td" + num[0]).animate({ opacity: 0.0 }, 1000, function () {
        $("#td" + num[0]).animate({ opacity: 1.0 }, 1000, function () {
            $("#td" + num[1]).animate({ opacity: 0.0 }, 1000, function () {
                $("#td" + num[1]).animate({ opacity: 1.0 }, 1000, function () {
                    $("#td" + num[2]).animate({ opacity: 0.0 }, 1000, function () {
                        $("#td" + num[2]).animate({ opacity: 1.0 }, 1000, function ()     {
                            $("#td" + num[3]).animate({ opacity: 0.0 }, 1000, function () {
                                $("#td" + num[3]).animate({ opacity: 1.0 }, 1000, function () {
                                    $("#td" + num[4]).animate({ opacity: 0.0 }, 1000, function () {
                                        $("#td" + num[4]).animate({ opacity: 1.0 }, 1000);
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });

    var colores = [];
    $("td").click(function () {
        var num2;


        switch ($(this).prop("id")) {
            case "td1": num2 = 1; break;
            case "td2": num2 = 2; break;
            case "td3": num2 = 3; break;
            case "td4": num2 = 4; break;
            case "td5": num2 = 5; break;
            case "td6": num2 = 6; break;
            case "td7": num2 = 7; break;
            case "td8": num2 = 8; break;
            case "td9": num2 = 9; break;
        }
        colores.push(num2);

        if (colores.length == 5) {
            var correcto = true;
            for (var i = 0; i < 5 && correcto == true; i++) {
              //  alert(colores[i]+"-"+num[i]);
                if (colores[i] != num[i]) {
                    correcto = false;
                }
            }
            if (correcto) {
                    alert("Acertastes");
                } else {
                    alert("Fallastes");
                }
        }

    });
</script>
</body>
</html>

Answer 1

使用递归函数代替循环就足够了吗？我猜您需要循环，因为您希望它是动态的

function animateMe(animateElementsIds, idIndex = 0){
    $("#td" + animateElementsIds[idIndex]).animate({ opacity: 0.0 }, 1000, function () {
        $("#td" + animateElementsIds[idIndex]).animate({ opacity: 1.0 }, 1000, function () {
          animateMe(animateElementsIds, ++idIndex);
        });
    });
}

var num = new Array(5);
    for (var i = 0; i < 5; i++) {
        num[i] = Math.ceil(Math.random() * 9);
    }

    /* for(var j=0; j<5; j++){
         $("#td"+num[j]).animate({ opacity : 0.0},1500,function(){
             $("#td"+num[j]).animate({ opacity : 1.0},1500);
         });
     }*/

    animateMe(num);

    var colores = [];
    $("td").click(function () {
        var num2;


        switch ($(this).prop("id")) {
            case "td1": num2 = 1; break;
            case "td2": num2 = 2; break;
            case "td3": num2 = 3; break;
            case "td4": num2 = 4; break;
            case "td5": num2 = 5; break;
            case "td6": num2 = 6; break;
            case "td7": num2 = 7; break;
            case "td8": num2 = 8; break;
            case "td9": num2 = 9; break;
        }
        colores.push(num2);

        if (colores.length == 5) {
            var correcto = true;
            for (var i = 0; i < 5 && correcto == true; i++) {
              //  alert(colores[i]+"-"+num[i]);
                if (colores[i] != num[i]) {
                    correcto = false;
                }
            }
            if (correcto) {
                    alert("Acertastes");
                } else {
                    alert("Fallastes");
                }
        }

    });

td{
        width: 100px;
        height: 100px;
        border: 2px solid black;
        text-align: center;
        vertical-align: middle;
    }

    #td1 {
        background-color: red;
    }

    #td2 {
        background-color: green;
    }

    #td3 {
        background-color: yellow;
    }

    #td4 {
        background-color: purple;
    }

    #td5 {
        background-color: black;
        color: white;
    }

    #td6 {
        background-color: orangered;
    }

    #td7 {
        background-color: blue;
    }

    #td8 {
        background-color: pink;
    }

    #td9 {
        background-color: brown;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
    <tr>
        <td id="td1">1</td>
        <td id="td2">2</td>
        <td id="td3">3</td>
    </tr>
    <tr>
        <td id="td4">4</td>
        <td id="td5">5</td>
        <td id="td6">6</td>
    </tr>
    <tr>
        <td id="td7">7</td>
        <td id="td8">8</td>
        <td id="td9">9</td>
    </tr>
</table>

如何在循环jquery中做到这一点？

1 个答案: