Question

Hello Guys我写了一些代码来使用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>

任何帮助将不胜感激。

Answer 1

问题是，执行切换的实际jQuery处理程序仅在第一次单击操作（在showfiles）方法之后添加，并且每次单击后它还会添加多个处理程序，从而导致意外行为。

因此，您可以为所有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();
    });
})

只有两次点击后，Jquery才会响应

1 个答案: