0

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();
  });
4

1 に答える 1