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 example

您可以使用jQuery的.index()函数查找单击的链接并选择相应的数组元素。两者都是零基础。

jquery - 循环问题的基础

1 个答案: