jquery - jquery - 基本的for循环问题

Question

我想根据我用 jquery 单击的链接更新图像的 src。我有四个链接和上面显示的图像。

如果我单击第一个链接，我希望图像的 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]);
            }
    });

});

Answer 1

用这个：

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/"];

$("nav a").on("click", function () {
    $("img").prop("src", container[$(this).index()]);
});

jsFiddle 示例

您可以使用 jQuery 的.index()函数来查找单击了哪个链接并选择相应的数组元素。两者都是从零开始的。