목록 항목을 클릭하면 해당 목록 항목과 관련된 표가 표시됩니다.

Question

사용자가 목록 항목을 선택하면 해당 목록 항목과 관련된 표가 표시됩니다. 나는 두뇌 구덩이를 가지고있다. 나는 그것을 해결하는 것에 가깝다 고 생각한다. 길이가 서로 같으면 각각의 길이를 찾은 다음 표시/클릭 기능을 만듭니다. 해답은 테이블이 다른 수백 가지 목록 항목에 사용할 수있는 대답이어야합니다.

그냥 목록에서의 위치에 따라 TBODY 요소에 목록 항목을 연결할 경우 사용하실 수 있습니다

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

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 .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>