jQueryイベントを適用するためにアンカーにイメージを選択する方法

私はh1をクリックすると、私の垂直メニューの画像にフェードアウトしようとしています。それを適切に行う方法は見つけられませんでした。私が得ることができる最も遠いものは完全なulであるが、特定のイメージではない。私の質問はどのようにjqueryのセレクタの組み合わせがアンカーにそれらの画像を選択することができます、それを行う方法です。私の意図は、これらの画像をフェードアウトし、同じ構造の他の要素をクリックしたときなど、他のアクション(イベント)で再びフェードインすることです。あなたは私の進歩をここで見ることができますwww.miramarlab.com/index222.htm

これは私の構造です:

<div id="slider4" class="trans">
 

SERVICES

DESCRIPTION

<div class="viewport"> </div> </div>

これはjqueryを使った私の控えめな意図です:

$(function() {
 $('#categories h1').click(
  function() {
   $(this).removeClass('hover').addClass('active');
   $('#categories h1').not(this).removeClass('active').addClass('normal');
   $(this).parents('div:eq(1)').stop().animate({'width':'488px'},500);
   $(this).next().stop(true,true).slideDown(500);

  //thi is my intent ;)
   $(this).siblings().children('img').stop(true,true).fadeOut(500);

   var siblings = $(this).parents('div:eq(1)').siblings()
   siblings.stop().animate({'width':'152px'},500);
   $('.description',siblings).stop(true,true).slideUp(500);
  }
 );
});

事前にみんなありがとう!

0

2 答え

img 要素は ul の子ではなく(より深い子孫です)、現在のコードは機能しません。試してください:

$(this).siblings().find('li img').stop(true,true).fadeOut(500);
2
追加された
@シネタ、あなたは正しい!オリジナルの .siblings()を追加したコードを修正しました。
追加された 著者 bfavaretto,
彼のクリックハンドラが内容を持たない

に適用されていれば、少し上に移動してlisまたはimgを見つけることができます

追加された 著者 Sinetheta,

登り上り、その後戻ってください。

$(this).closest('.trans').find('img').stop(true,true).fadeOut(500);

これは常にフォームを目標とする安全なパターンです。

1) $(this)の要素から開始するか、 var $ header = $(this)

2) Traverse to the "group container" using .closest()

3) Drill back down to the elements of interest using .find()

こうすることで、コードを再利用しやすくなり、htmlのマイナーチェンジに強くなります

2
追加された