javascript でサムラッパーを非表示にしました。ホバーすると、親指を非表示の状態から上にスライドさせます。今、私はそれらすべてを示しています。見たい画像だけを表示したい。
スライド番号を表すサムネイル リンクにデータ data-attribute があるので、最も簡単な方法は子供をターゲットにすることだと考えました。Fade in Child 2、または Child 3、ヤタ ヤタ ヤー。
eq() は正しいアプローチだと思いましたが、成功しませんでした。
すなわち:$('.orbit-hacked-thumb').eq(2).fadeIn("200");
すなわち $('.orbit-hacked-thumb:eq(2)').fadeIn("200");
セレクターのマークアップは省略しましたが、すべて問題ありません。
整数を使用してその子を選択するにはどうすればよいですか?
どんな助けでも大歓迎です。
<div class="thumb-wrapper">
<img src="/assets/hpr/carousel/demo-beyonce.png" class="orbit-hacked-thumb"/>
<img src="http://thetfs.ca/wp-content/uploads/2010/04/black-square.jpg" class="orbit-hacked-thumb" style="height:45px;"/>
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
<img src="/assets/hpr/carousel/test.png" class="orbit-hacked-thumb" />
</div>
ジャバスクリプト
//hover trigger thumbnails
$('.orbit-hacked-thumb').hide();
$('.orbit-bullets li').mouseover(function() {
child = $(this).attr("data-orbit-slide-number")
$('.orbit-hacked-thumb').fadeIn("200");
console.log(child);
}),
$('.orbit-bullets li').mouseout(function() {
$('.orbit-hacked-thumb').hide();
});