jquery - 如何相对于另一个列表中的项目显示另一个列表中的项目？

Question

我正在尝试创建一个项目符号导航栏，以浏览一系列图像。

我还想在突出显示的项目符号下方显示一个缩略图。

我的方法是动态创建两个列表——一个无序列表的项目符号和一个无序列表的缩略图。我通过遍历我拥有的所有图像来做到这一点 - 并append()进入两个列表（append()一个列表的项目符号，然后append()另一个列表的缩略图）

然后我hover()为每个项目符号添加一个函数，它将隐藏所有缩略图但显示相应的缩略图。

它可以工作 - 但是缩略图总是出现在同一个固定位置。如何在突出显示的项目符号下方显示它？

请在此处查看我的 jsfiddle：http: //jsfiddle.net/beeband/u2zKE/

注意。有一个错误 - 最后两个拇指从未出现 - 不知道那里发生了什么，图像存在。可能有关系？

score 1 · Accepted Answer

干得好

问题是您使用 index 属性，第一个元素将返回 2。 http://jsfiddle.net/u2zKE/3/

所以你的 DOM 有问题。

我修改了代码以使用自定义data-index attribute. 因此，DOM 不会损坏。

    var liMarkup = $('<li class="bulletButton" data-index="'+i+'"><a href="#">'+i+'</a></li>'); // New line with data-index attribute

另一个变化是使用 data-index 属性

    .eq($(this).data("index"))//Get the li at same index which triggered hover

1 回答 1