javascript - jQuery関数を短縮するには?

Question

私はこのjQuery関数を持っています。わずかな変更を除いて、2行ごとに同じです。どうすれば短くできますか？

$(".c1").delay(5000).fadeOut("slow", function() {
    $("#phone").addClass("c2").fadeIn("slow", function() {
        $(".c2").delay(5000).fadeOut("slow", function() {
            $("#phone").addClass("c3").fadeIn("slow", function() {
                $(".c3").delay(5000).fadeOut("slow", function() {
                    $("#phone").addClass("c4").fadeIn("slow", function() {
                        $(".c4").delay(5000).fadeOut("slow", function() {
                            $("#phone").addClass("c5").fadeIn("slow", function() {
                                $(".c5").delay(5000).fadeOut("slow", function() {
                                    $("#phone").addClass("c6").fadeIn("slow", function() {
                                        $(".c6").delay(5000).fadeOut("slow", function() {
                                            $("#phone").addClass("c7").fadeIn("slow", function() {
                                                $(".c7").delay(5000).fadeOut("slow", function() {
                                                    $("#phone").addClass("c8").fadeIn("slow", function() {
                                                        $(".c8").delay(5000).fadeOut("slow", function() {
                                                            $("#phone").addClass("c9").fadeIn("slow", function() {
                                                                $(".c9").delay(5000).fadeOut("slow", function() {
                                                                    $("#phone").addClass("c1").fadeIn("slow");
                                                                });
                                                            });
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});
});

score 9 · Accepted Answer

次のような再帰関数を使用できます。

function phoneCall(i){
    $(".c" + i).delay(5000).fadeOut("slow", function() {
        $("#phone").addClass("c" + (i + 1)).fadeIn("slow", function() {
            if(i <= 9) phoneCall(i + 1);
        });
    });            
} 
phoneCall(1);

score 3 · Accepted Answer

クラス#phoneを取得するのは要素だけのようです。c_その場合は、要素をキャッシュして、一連のコードを削除できます。

var phone = $("#phone"), i = 0;

(function cycle() {
    i = ((i % 9) + 1);
    phone.addClass("c" + i).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

インクリメントをインライン化することで、コード行を削除することもできます。

var phone = $("#phone"), i = 0;

(function cycle() {
    phone.addClass("c" + ((++i % 9) + 1)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

@charlietflが指摘したように、無限にループさせたくない場合があります。returnそうでない場合は、ステートメントを追加します。

var phone = $("#phone"), i = 0;

(function cycle() {
    if (i === 9) return;
    phone.addClass("c" + ((++i % 9) + 1)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

0また、FWIW、ベースのインデックスを使用すると、番号付けは通常少し簡単になります。

var phone = $("#phone"), i = -1;

(function cycle() {
    phone.addClass("c" + (++i % 9)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();

score 2 · Accepted Answer

次のようなものを使用できます。

function inception(fromInt, tillInt){
    if (fromInt < tillInt){
        $('.c' + fromInt).delay(5000).fadeOut("slow",function(){
            newInt = fromInt +1;
            $('#phone').addClass('c'+newInt).fadeIn("slow", function() {
                inception(newInt, tillInt));
            }
        });
    }else{
        if(fromint == tillInt){
            $('.c' + fromInt).delay(5000).fadeOut("slow");
        }
    }
}

次に、コードに追加します。

inception(1,9);

score 1 · Accepted Answer

わかんないよこんなの？

var num = 2;

var HandlerForC = function () {
    if (num < 10) {
        $("#phone").addClass("c" + num).fadeIn("slow", HandlerForPhone);
    } else {
        $("#phone").addClass("c1").fadeIn("slow");
    }

}

var HandlerForPhone = function () {
    num++;
    $(".c" + (num - 1)).delay(5000).fadeOut("slow", HandlerForC);
}
HandlerForPhone();

javascript - jQuery関数を短縮するには?

4 に答える 4

Related

Reference