javascript - HTMLを配列の次の項目に変更 - jquery

Question

私の最初の配列は、かなり単純だと思っていたものですが、そうではありません (ただし、js に関する知識はほとんどありません)。

クリックイベントで配列を（順番に）反復しようとしています。したがって、フロントエンドでは事実が表示され、ボタンをクリックして次の事実を表示します...単純なアイデアです。

Q: すべてが機能しているとき、配列の最後で、ユーザーがクリックして次の配列を表示するとどうなりますか? どうすればそれを処理できますか？

JS

$(document).ready( function() {
    function factsInit() {
        // Define all facts
        var factText = [
                "Oxford won the first Boat Race, which took place on 10th June 1829 at Henley-on-Thames.",
                "In 2003, Oxford won the closest ever Boat Race by just one foot.",
                "Oxford coxswain Sue Brown became the first woman to participate in The Boat Race in 1981.",
                "Oxford's victorious 2009 Blue Boat was the heaviest in the history of the race at an average of 15st 9lb 13oz (99.7kg) per rower.",
                "In 2012, Oxford's reserve crew, Isis, beat Goldie by 5 lengths to set the course record for the reserve race at 16:41."
            ],
            factImage = [
                "/clients/oubc/assets/img/factimage_firstrace.jpg",
                "/clients/oubc/assets/img/factimage_oubc2003.jpg",
                "/clients/oubc/assets/img/factimage_oubcsuebrown.jpg",
                "/clients/oubc/assets/img/factimage_oubc2009heaviestever.jpg",
                "/clients/oubc/assets/img/factimage_isis2012.jpg"
            ];

        // Apply these facts
        $('#widget_facts .fact_text').html(factText[0]);
        $('#widget_facts .fact_image > *').attr('src', factImage[0]);

        // Go to next fact on click
        $('#widget_facts .link > a').click( function() {
            $('#widget_facts .fact_text').html(factText++);
            $('#widget_facts .fact_image > *').attr('src', factImage++);
        });
    }
    // Run the first fact
    factsInit();
});