单击tr时尝试切换表中的tr。我已经编写了代码，但是似乎没有用。
它最初是用php编写的，但是我的php代码相当混乱，因此我认为仅捕获输出将有助于组织事情。
例如，当我单击folder1时，我需要folderContent1来显示。
出于某种原因，jQuery对此不起作用。
jQuery是否有问题，还是我必须显示我的php代码？
编辑。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login: Protected Page</title>
<script type="text/Javascript" src="js/jQuery-1.7.js"></script>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<p>Welcome joshbarber89!</p>
<p>
<table>
<tr>
<td>Admin Tools:</td>
</tr>
<tr>
<td>Register a user <a href='register.php'>here</a></td>
</tr>
<tr>
<td>Edit/Delete user <a href='editList.php'>here</a></td>
</tr>
</table>
<br/>
<table>
<tr>
<td>Create new folder <a href='createFolder.php'>here</a></td>
</tr>
<tr>
<td>Add <a href='add_content.php'>content</a></td>
</tr>
</table>
<p> Content: </p>
<table id='content'>
<tr>
<td width='50'></td><td>Folder Name</td><td>Tools</td><tr id='folder1'><td><img src='images/folder.gif' alt='...' height='30' width = '30'/><td width='150'>a</td></td><td><a href='edit_folder.php?id=1'>Edit</a> <a href='delete_folder.php?id=1'>Remove</a></td></tr><tr class='folderContent1'><td width='150'>a</td><td width = '100'><a href=uploads/dir615_manual_100.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=24'>Edit</a> <a href='delete_content.php?id=24'>Remove</a></td></tr><tr class='folderContent1'><td width='150'>stuff in a</td><td width = '100'><a href=uploads/Interprovincial%20-%20Territorial%20Protocol%20%5B02-Apr-2002%5D.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=25'>Edit</a> <a href='delete_content.php?id=25'>Remove</a></td></tr><tr id='folder2'><td><img src='images/folder.gif' alt='...' height='30' width = '30'/><td width='150'>blah</td></td><td><a href='edit_folder.php?id=2'>Edit</a> <a href='delete_folder.php?id=2'>Remove</a></td></tr><tr class='folderContent2'><td width='150'>stuff</td><td width = '100'><a href=uploads/dir615_manual_100.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=22'>Edit</a> <a href='delete_content.php?id=22'>Remove</a></td></tr><tr class='folderContent2'><td width='150'>asdasdasd</td><td width = '100'><a href=uploads/sbcon_admin.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=23'>Edit</a> <a href='delete_content.php?id=23'>Remove</a></td></tr></table>
<script>
$(document).ready(function(){
var count = $('#content tr').length;
for(var i = 0; i< count; i++)
{
$('.folderContent'+i).hide();
$('#folder'+i).click(function(){
$('.folderContent'+i).toggle();
});
}
});
</script>
<p>If you are done, please <a href="includes/logout.php">log out</a>.</p>
</p>
<p>Return to <a href="login.php">login page</a></p>
</body>
</html>
控制台中没有错误
最佳答案
您正在遇到带有闭包的常见陷阱之一。在单击处理程序称为i = count时，所有单击处理程序按钮将切换最后一个元素。
您可以通过将循环的主体包装在立即调用的函数中来解决此问题。
for(var i = 0; i < count; i++) {
(function(i) {
$('.folderContent'+i).hide();
$('#folder'+i).click(function() {
$('.folderContent'+i).show();
});
})(i);
}