Javascript Jquery只在两次单击后响应_Javascript_Jquery

Javascript Jquery只在两次单击后响应

javascript jquery

Javascript Jquery只在两次单击后响应,javascript,jquery,Javascript,Jquery,大家好，我编写了一些代码来使用jquery切换表行，但我不明白为什么jqueryclick函数只在两次单击后才起作用看看我的代码，伙计们，请告诉我在哪里可以更改代码，这样它只需单击一下就可以响应 <%@ page import="java.io.File" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <style>

大家好，我编写了一些代码来使用jquery切换表行，但我不明白为什么jqueryclick函数只在两次单击后才起作用

看看我的代码，伙计们，请告诉我在哪里可以更改代码，这样它只需单击一下就可以响应

<%@ 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>


身体{
左边距：50像素；
边缘顶部：50px；
}
a{
文字装饰：无；
}
表THAD tr{
左边距：20px；
}
函数显示文件（行）{
$（'.demo'+行）。单击（函数（e）{
e、 预防默认值（）；
$（'.pro'+行）.toggle（）；
});
}
领域
项目名称
程序计数
宏计数
项目经理
开发经理
技术负责人
建筑师
普里马维拉
ICR
GCR
)" />

任何帮助都将不胜感激。

问题是，执行切换的实际jQuery处理程序仅在第一次单击操作（在

showfiles

方法中）后添加，而且它还会在每次单击后添加多个处理程序，导致意外行为

因此，您可以为所有

img

元素分配一个公共类，然后在dom就绪处理程序中向其添加一个单击处理程序。在该处理程序中，您试图显示下一个

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>

或者，如果仍要使用行号显示

tr

，则

<img class="demo <%=str%>" src="Expand.png" alt="Expand Image" width="15" height="15" data-line="<%=i%>" />

它工作了，但是在“demo”元素下只有一个兄弟元素显示。如果我在“demo”元素中有4个“pro”tr元素，那么只有一个“pro”元素显示如果首先更改

$（this）。最近（'tr'）。下一个（'pro'）。toggle（）；

到

$（this）。最近（'tr'）。下一个（'tr'）。直到（'tr:has（img.demo'））））。toggle（）；

或

$（this）。最近（'tr）.nextUntil（'tr:not（.pro）'）.toggle（）；

它成功了。谢谢你的回复。你真是太棒了。

<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();
    });
})