單擊列表項目應顯示與該列表項目相關的表格

當用戶選擇列表項目時，應該顯示與該列表項目關聯的表格。我有一個腦袋，我想我已經接近解決它，或者至少是關於如何去做的想法。找到每個長度，如果長度相等，則創建顯示/點擊功能。答案應該是可以用於數百個具有不同表格的列表項目的答案。單擊列表項目應顯示與該列表項目相關的表格

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>

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

來源

2017-04-18 userlkjsflkdsvm

什麼的應該做你的JS的循環？第一個'return'語句將立即退出周圍的函數。你不需要循環，你可以說'if（list.length === table.length）'。 *「當用戶選擇列表項時」* - 不是你要問什麼，但是如果一個用戶不能使用你的頁面（誰也許沒有物理上不能使用你的頁面）？您應該在li元素中使用錨點，以便可以通過鍵盤或鼠標「點擊」錨點。 – nnnnnn

好的，謝謝，我已經修復了這個問題 – userlkjsflkdsvm

@userlkjsflkdsvm你的代碼讓我困惑，所以我寫了自己的。它是否像你需要的一樣工作？ http://jsbin.com/motoseyupa/edit?html,js,output – GONG

如果你想在列表項目正是基於它們在列表中的位置的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>

來源

2017-04-18 04:31:35 nnnnnn

單擊列表項目應顯示與該列表項目相關的表格

回答

相關問題