nth-childベースのサブカテゴリを複数の行に表示しない

Question

nth-childまたはcountに基づくセレクタに基づいていくつかの非表示項目を作成しようとしています。 最初の行の最初の項目をクリックすると、2番目の行の最初の項目が表示され、その行の他の項目は非表示になります。簡略化されたコードをお手伝いください。

$(document).ready(function(){ 

    $(".subrow1 .item-a a:nth-child(1)").click(function(){  
     $(".subrow2 .idgroupsub:nth-child(1)").show(); 
     $(".subrow2 .idgroupsub:nth-child(2)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(3)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(4)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(5)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(6)").hide(); 
    }); 
    $(".subrow1 .item-a a:nth-child(2)").click(function(){  
     $(".subrow2 .idgroupsub:nth-child(2)").show(); 
     $(".subrow2 .idgroupsub:nth-child(1)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(3)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(4)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(5)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(6)").hide(); 
    }); 

    $(".subrow1 .item-a a:nth-child(3)").click(function(){  
     $(".subrow2 .idgroupsub:nth-child(3)").show(); 
     $(".subrow2 .idgroupsub:nth-child(1)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(2)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(4)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(5)").hide(); 
      $(".subrow2 .idgroupsub:nth-child(6)").hide(); 
    }); 

}); 

http://jsfiddle.net/Lv5cn8xy/244/

Answer 1

私はバイオリンを更新しました。これを見てください：http://jsfiddle.net/Lv5cn8xy/245/助けがあれば教えてください。ボタンに特別な属性を追加し、次のjQueryを書きました。

$(document).ready(function(){ 
    $(".subrow1 .item-a a").click(function(){ 
     var show_div = $(this).attr('show'); 
     $('.idgroupsub').each(function(){ 
      $(this).hide(); 
     }); 
     $('.idgroupsub.item-'+show_div).show(); 
    }); 
}); 

Answer 2

あなたは "インデックス（）" 関数でそれを試してみて、このようなCSSを選択することができます。

$(document).ready(function(){ 

    $(".subrow1 .item-a a").click(function(){ 
     var index = $(this).index()+1; 
     $(".subrow2 .idgroupsub:nth-child("+index+")").show(); 
     $(".subrow2 .idgroupsub:not(:nth-child("+index+"))").hide(); 
    }); 

}); 

の作業例：http://jsfiddle.net/CodeFoxx/us1nk859/