大家好，我写了一些代码来使用jquery切换表行，但是我不明白为什么这个jquery click函数只能在单击两次后才能工作。
看一下我的代码，伙计们，请告诉我我可以在哪里更改代码，以便单击即可响应
<%@ page import="java.io.File" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<style>
body{
margin-left: 50px;
margin-top: 50px;
}
a{
text-decoration: none;
}
table thead tr tr{
margin-left: 20px;
}
</style>
<script src="query.js"></script>
<script>
function showfiles(line){
$('.demo' + line).click(function(e) {
e.preventDefault();
$('.pro' + line).toggle();
});
}
</script>
</head>
<body>
<table class="tabl" cellpadding="10" style="width: 100%">
<thead>
<tr align="left">
<th>Domain</th>
</tr>
<tr align="center">
<th>Project Title</th>
<th>Program Count</th>
<th>Macro count</th>
<th>Project Manager</th>
<th>Development Manager</th>
<th>Tech Lead</th>
<th>Architect</th>
<th>Primavera</th>
<th>ICR</th>
<th>GCR</th>
</tr>
</thead>
<%
String str,str1;
int i = 0;
File file,file1,file2;
String[] paths,paths1,paths2;
String fullpath,fullpath1;
String dirpath = "C:\\apache-tomcat-7.0.63\\webapps\\data";
try{
file = new File(dirpath);
paths = file.list();
for(String path:paths)
{
fullpath = dirpath+"\\"+path;
fullpath1 = fullpath.replace("\\","\\\\");
str = "demo" + i;
%>
<tr>
<td><img class=<%=str%> src="Expand.png" alt="Expand Image" width="15" height="15" onclick="showfiles(<%=i%>)" /><%=path%></td>
</tr>
<%
file1 = new File(fullpath);
paths1 =file1.list();
for(String line:paths1){
str1 = "pro" +i;
file2 = new File(fullpath + "\\" +line);
paths2 = file2.list();
%>
<tr hidden align="center" class=<%=str1%>><td><%=line%></td><td> <%=paths2.length%></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td></tr>
<%
}
i++;
}
}catch (Exception e){
e.printStackTrace();
}
%>
</table>
</body>
</html>
任何帮助将不胜感激。
最佳答案
问题是，仅在第一次单击操作(在showfiles中)方法之后才添加进行切换的实际jQuery处理程序，并且在每次单击后会导致意外行为而添加多个处理程序。
因此，您可以为所有img元素分配一个通用类，然后在dom ready处理程序中向其添加单击处理程序。在处理程序中，您尝试显示下一个tr兄弟元素，因此
<img class="demo <%=str%>" src="Expand.png" alt="Expand Image" width="15" height="15"/>
and
<tr hidden align="center" class="pro <%=str1%>"><td><%=line%></td><td> <%=paths2.length%></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td></tr>
然后
$(document).ready(function () {
$('.demo').click(function (e) {
e.preventDefault();
$(this).closest('tr').next('.pro').toggle();
});
})
或者，如果您仍要使用行号显示
tr，则<img class="demo <%=str%>" src="Expand.png" alt="Expand Image" width="15" height="15" data-line="<%=i%>" />
然后
$(document).ready(function () {
$('.demo').click(function (e) {
e.preventDefault();
$('.pro' + $(this).data('line')).toggle();
});
})