大家好，我写了一些代码来使用 jquery 切换表格行，但我不明白为什么这个 jquery 点击功能只在点击两次后才有效。
看看我的代码，伙计们请告诉我在哪里可以更改我的代码，以便它响应一次单击
<%@ 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>
我们将不胜感激。
最佳答案
问题是，执行切换的实际 jQuery 处理程序仅在第一次单击操作(在 showfiles)方法后添加，而且它会在每次单击后添加多个处理程序，从而导致意外行为.
因此，您可以为所有 img 元素分配一个公共(public)类，然后在 dom 就绪处理程序中为其添加一个点击处理程序。在处理程序中，您正试图显示下一个 tr 兄弟元素 so
<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();
});
})
关于javascript - jquery 只在点击两次后响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32174568/