单击列表项目应显示与该列表项目相关的表格

当用户选择列表项目时，应该显示与该列表项目关联的表格。我有一个脑袋，我想我已经接近解决它，或者至少是关于如何去做的想法。找到每个长度，如果长度相等，则创建显示/点击功能。答案应该是可以用于数百个具有不同表格的列表项目的答案。单击列表项目应显示与该列表项目相关的表格

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

单击列表项目应显示与该列表项目相关的表格

回答

相关问题