Question

我在点击单个链接时尝试更改图像的src（我只有3个）。

因此，如果我点击链接＃1，src会发生变化，如果我点击链接＃2，它会更改为其他内容，有点像基本图像滑块。

以下是一个简化示例：http://jsfiddle.net/BVmUL/164/

我试过的jquery：

var images = [
    "http://lorempixel.com/400/200/",
    "http://linenwoods.com/images/kitten.png",
    "http://linenwoods.com/images/third.png"
],
    links = $("ol.list-inline > li > a"),
    img = $("figure > img");

links.each(function(){
    links.click(function(){
        img.prop("src", images[links.index()]);
        console.log($(this).index()); // only gives back 0 instead of 0,1,2 like
                                      // I expected ...
    });
});

如何使用jquery做这样的事情？

Answer 1

锚点位于LI元素内部且没有兄弟，因此它们的索引始终为零。

var images = [
    "http://lorempixel.com/400/200/",
    "http://linenwoods.com/images/kitten.png",
    "http://linenwoods.com/images/third.png"
],
    links = $("ol.list-inline > li > a"),
    img = $("figure > img");


    links.on('click', function(){
        img.prop("src", images[$(this).closest('li').index()]);
    });
});

获取父LI的index（）而不是

jQuery - 如何在单击链接时循环访问数组？

1 个答案: