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

Question

我正在尝试创建一个子弹导航栏，以浏览一系列图像。

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

我的方法是动态创建两个列表 - 一个无序的项目符号列表，以及一个无序的缩略图列表。我这样做是通过迭代我拥有的所有图像 - append()到两个列表（append()一个子弹到一个列表，然后append()缩略图到另一个列表）

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

它有效 - 但缩略图始终显示在同一个固定位置。 如何在突出显示的子弹下面显示它？

请在这里查看我的jsfiddle： http://jsfiddle.net/beeband/u2zKE/

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

Answer 1

http://jsfiddle.net/u2zKE/2/

你去吧

问题是你使用索引属性，第一个元素将返回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

另一个变化是，使用insgu的数据索引属性

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