0

一連の画像をナビゲートするために、箇条書きのナビゲーション バーを作成しようとしています。

また、強調表示された箇条書きのすぐ下にサムネイルを表示したいと考えています。

私のアプローチは、2 つのリストを動的に作成することでした。箇条書きの順序付けられていないリストと、サムネイルの順序付けられていないリストです。私は持っているすべての画像を繰り返し処理し、append()両方のリストにアクセスすることでこれを行っています（append()一方のリストに箇条書き、次にappend()もう一方のリストにサムネイル）

次に、hover()各箇条書きに関数を追加します。これにより、すべてのサムネイルが非表示になりますが、対応するサムネイルが表示されます。

それは機能しますが、サムネイルは常に同じ固定された場所に表示されます。強調表示された箇条書きの下に表示するにはどうすればよいですか?

ここで私の jsfiddle を参照してください: http://jsfiddle.net/beeband/u2zKE/

注意。バグがあります - 最後の 2 つの親指が表示されません - そこで何が起こっているのかわかりません。画像は存在します。関係あるかも？

4

1 に答える 1

1

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

どうぞ

問題は、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

もう 1 つの変更として、代わりに data-index 属性を使用します。

    .eq($(this).data("index"))//Get the li at same index which triggered hover
于 2012-10-14T08:19:42.650 に答える