リストアイテムをクリックすると、そのリストアイテムに関連するテーブルが表示されます

Question

ユーザがリストアイテムを選択すると、そのリストアイテムに関連付けられたテーブルが表示されます。私は脳のブロックを持っている、私はそれを解決するに近いと思うか、少なくとも方法のアイデアを。長さが互いに等しい場合は、それぞれの長さを見つけてから、表示/クリック機能を作成します。答えは、異なるテーブルを持つ何百ものリスト項目に使用できるものでなければなりません。

HTML

<div> 
      <ul> 
       <li id='one'><a href="#">number</a></li> 
       <li id='two'><a href="#">othernumber</a></li> 
      </ul> 
     </div> 
     <div> 
      <table> 
       <thead> 
        <tr> 
         <th>title</th><th>title</th><th>title</th><th>title</th> 
        </tr> 
       </thead> 
       <tbody id="table1"> 
        <tr> 
         <td>blah</td> 
         <td>blah</td> 
         <td>blah</td> 
         <td>blah</td> 
        </tr> 

       </tbody> 
       <tbody id="table2" style="display:none"> 
        <tr> 
         <td>blahTwo</td> 
         <td>blahTwo</td> 
         <td>blahTwo</td> 
         <td>blahTwo</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

JS

function count(){ 
    var list = jQuery('ul li') 

    var table = jQuery('table tbody') 

    if(table.length == list.length){ 
     jQuery(list).click(function(){ 
      //show the table length that is equal to the list length 

     }) 
    } 
} 

jsfiddle

Answer 1

あなただけのリスト内の位置に基づいてのtbody要素にリスト項目を関連付けしたい場合は、利用することができます.index() methodと組み合わせて.eq()：

var list = jQuery('ul li a') 
 
var table = jQuery('table tbody').hide() 
 
    
 
list.click(function(e) { 
 
    table.hide().eq(list.index(this)).show() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li id='one'><a href="#">number</a></li> 
 
    <li id='two'><a href="#">othernumber</a></li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>title</th> 
 
     <th>title</th> 
 
     <th>title</th> 
 
     <th>title</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="table1"> 
 
     <tr> 
 
     <td>blah</td> 
 
     <td>blah</td> 
 
     <td>blah</td> 
 
     <td>blah</td> 
 
     </tr> 
 

 
    </tbody> 
 
    <tbody id="table2" style="display:none"> 
 
     <tr> 
 
     <td>blahTwo</td> 
 
     <td>blahTwo</td> 
 
     <td>blahTwo</td> 
 
     <td>blahTwo</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>