いくつかのjqueryを整理する助け

Question

私は少し膨れていると思ういくつかのjavascript（jQuery）があり、それをコード化する良い方法があるかどうか疑問に思っていた、コードは基本的に次の伝記が表示され、残りの部分は隠され、ユーザーは次に画像をクリックしてインデックス番号を取得し、そこから画像を取得します。.biographyは画像に属し、次に古いテキストをアニメーション化し、かなり厄介なコードだと思っていて、私がやっていることを達成するための方法があるかどうか疑問に思っていましたか？

$('.biography:first').show().addClass('visible'); 
      $('.biography:not(.visible)').css("top", "300px"); 
      $('.the-team img').click(function(){ 
       var clickedImage = $(this); 
       $('.visible').animate({"top" : $('.the-team').height()+10 }, 1000).removeClass('visible').fadeOut(5); 
       var indexToShow = clickedImage.index() + 1; 
       if(indexToShow == 1) { 
        indexToShow = 2; 
       } else if(indexToShow == 5) { 
        indexToShow = 4; 
       } else if(indexToShow == 7) { 
        indexToShow = 5; 
       } 
       $('.biography:nth-child('+indexToShow+')').addClass('visible').show(); 
       $('.biography:nth-child('+indexToShow+')').animate({"top" : "123px"}, 1000); 
      }); 

私はいくつかのxブラウザのテストをやっている、と誰もがこの上で役立つ可能性が明らかにウェブサイトのbroswersは、ベースのブラウザをMOZように、異なるインデックスをうまく？

以下

が私のHTMLマークアップ、IMO

<article class="the-team"> 
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <?php if($post->ID == 15) : ?> 
       <h1>your team</h1> 
      <?php else: ?> 
       <h1><?php the_title(); ?></h1> 
      <?php endif;?> 
      <?php the_content(); ?> 
     <?php endwhile; endif;?> 
     <section> 
     <?php query_posts('post_type=team&order=ASC'); ?> 
     <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <?php the_post_thumbnail(); ?> 
      <article class="biography"> 
       <h3><?php the_title(); ?></h3> 
       <?php the_content(); ?> 
      </article> 
     <?php endwhile; endif; ?> 
     </section> 
    </article> 

Answer 1

で、コードは罰金です。私が気づいた唯一の事：これは再びn番目の子を見つけるために時間を節約する

$('.biography:nth-child('+indexToShow+')').addClass('visible').show().animate({"top" : "123px"}, 1000); 

：

$('.biography:nth-child('+indexToShow+')').addClass('visible').show(); 
$('.biography:nth-child('+indexToShow+')').animate({"top" : "123px"}, 1000); 

に変更することができます。

Answer 2

これはもっと効率的に行うことができると思います。 Firebugを使用している場合、jQuery lint（またはFireQuery）は、同じセレクタを複数回使用し、クラス専用のセレクタを使用することに関する警告を表示します。実際にレンダリングされたHTMLを投稿した場合、または私たちが作業できるjsFiddleをより良く作成した場合、私たちが "最適化"する方がはるかに簡単です。