リファクタリングjQueryをNに適用するアンカーとdivのペアの数

Question

クリック数に基づいて非表示にして表示する未知数のリンクとdivがあります。 —私のコードをリファクタリングして数字部分を取り出し、01からNまでループするようにします。

以下の例では4組のアンカータグとdivがありますが、

<a class="bioImg bioImg01"></a> 
<a class="bioImg bioImg02"></a> 
<a class="bioImg bioImg03"></a> 

<div class="bioContainer bioContainer01"> 
</div> 

<div class="bioContainer bioContainer02"> 
</div> 

<div class="bioContainer bioContainer03"> 
</div> 

<a class="bioImg bioImg04"></a> 

<div class="bioContainer bioContainer04"></div> 

のJavaScript（jQueryの）：：どこでも1から100（またはそれ以上）に

HTMLマークアップすることができ これは私が知っている部分だけの経験や語彙を持っていない—非効率的ですそれを正しく行うには

// Click events for Bio page 
    if ($('.bioImg').length > 0) { 
     $('.bioImg').click(function() { 
      $('.bioImg').removeClass('active'); 
      $(this).addClass('active'); 
     }); 
    } 

if ($('.bioContainer').length > 0) { 
    $('.bioImg01').click(function() { 
     $('.bioContainer').hide(); 
     $('.bioContainer01').fadeToggle(); 
    }); 
} 

if ($('.bioContainer').length > 0) { 
    $('.bioImg02').click(function() { 
     $('.bioContainer').hide(); 
     $('.bioContainer02').fadeToggle(); 
    }); 
} 

if ($('.bioContainer').length > 0) { 
    $('.bioImg03').click(function() { 
     $('.bioContainer').hide(); 
     $('.bioContainer03').fadeToggle(); 
    }); 
} 

if ($('.bioContainer').length > 0) { 
    $('.bioImg04').click(function() { 
     $('.bioContainer').hide(); 
     $('.bioContainer04').fadeToggle(); 
    }); 
} 

Answer 1

インデックス作成を使用して、これらのグループを一致させることができます。あなたが特別なCSSを持っていない限り、同じタイプの要素のグループ内のそれぞれに一意のクラス名を必要とすることはまれです。

var $bioImg = $('.bioImg').click(function() { 
    // get index of current bioImg within collection 
    var index = $bioImg.index(this); 
    $bioImg.removeClass('active'); 
    $(this).addClass('active'); 
    // hide all containers and fade in matching indexed one 
    $('.bioContainer').hide().eq(index).fadeIn(); 
});