[英]Clicking a list item should display table related to that list item
當用戶選擇列表項時,應顯示與該列表項關聯的表。 我有一個大腦障礙,我想我即將解決它,或者至少是關於如何解決的想法。 找到每個的長度,如果長度相等,則創建顯示/單擊功能。 答案應該是可以用於具有不同表的數百個列表項的答案。
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
})
}
}
如果要僅基於列表項中的位置將列表項與tbody元素相關聯,則可以將.index()
方法與.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.