jquery - jquery - 基本的な for ループの問題

Question

jqueryでクリックしたリンクに応じて画像のsrcを更新したい。4 つのリンクと上に表示された画像があります。

最初のリンクをクリックすると、画像の src がコンテナー配列の最初の要素に変更されます。配列の最後の要素に到達するまで、そのようにインクリメントする必要があります。

この基本的なアプローチを行うための最良の方法は何ですか?

<figure>
    <img src="http://lorempixel.com/g/400/200/" />
    <figcaption>
        <nav>
            <a href="#">Image One</a>
            <a href="#">Image Two</a>
            <a href="#">Image Three</a>
            <a href="#">Image Four</a>
        </nav>
    </figcaption>
</figure>

jquery:

$(function(){

    var container = [
       "http://lorempixel.com/g/400/200/",
       "http://lorempixel.com/g/400/200/",
       "http://lorempixel.com/g/400/200/",
       "http://lorempixel.com/g/400/200/"
    ];

    var i;
    $("nav a").on("click", function(){
            for(i = 0; i < 4; i++) {
                $("img").attr("src", container[i]);
            }
    });

});