Question

我试图弄清楚单击标题（此处为服务器名）时应如何扩展和折叠表行，并将其应用于特定的标题（即已被单击的标题）。

我的app.html.erb

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="expand.js">  
 </script>
</head>
<body>
<h1> OUTPUT STATISTICS </h1>
<table border="1">
    <% @values.each do |value| %>
     <tr class="server-name">
     <td colspan="3"> <%= value[:server_name]  %> </td>
    </tr>  
    <tr class="members vals">
       <td colspan="2"> NAME </td>
       <td colspan="4"> DATA </td>
       <td colspan="3"> SIZE </td>
    </tr>
    <% value[:attributes].each do |attribute| %>
      <% attribute[:data].each.with_index do |(key, val), i| %>
        <tr class="members">
          <td colspan="2"> <%= i == 0 ? attribute[:name] : ""  %> </td>
          <td colspan="4"> <%= key %></td>
          <td colspan="3"> <%= val %></td>
        </tr>
      <% end %>
      <% if attribute[:data].empty? %>
        <tr class="members">
          <td colspan="2"> <%= attribute[:name] %> </td>
          <td colspan="4"> </td>
          <td colspan="3"> </td>
        </tr>
      <% end %>
     <% end %>
    <% end %>
  </table>
 </body>
</html>

输出几乎是完美的，除了当我单击相应的标题或服务器名称时不会发生扩展和折叠

expand.js

$('.server-name').click(function(){
   $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.server-name').slideToggle(500, function(){
    });
});

style.css

tr.server-name {
    display: table-row;
    font-size:25px;
    font-family:cursive;
    background-color:lightgreen;
    cursor:pointer;
    border-collapse:collapse;
}
.members {
    font-family:calibri;
}
.vals {
    color:green;
    font-size:17px;
}

我就像js + jquery一样大了一天，我不确定哪里出了问题。

P.S：我只使用Ruby。

https://jsfiddle.net/p9mtqhm7/521/ [它在jsfiddle页面中有效，但在我的erb模板代码中无效]

我也将红宝石脚本中的.html.erb称为

opta = File.open(("final.html"), "w+")
opta.puts ERB.new(File.read("app.html.erb")).result binding

Answer 1

您在.js文件中缺少文档就绪处理程序。在使用JavaScript处理页面上的对象之前，必须确保DOM准备就绪。

它可在JSFiddle上运行，因为它为其JavaScript编辑器框安装了自动就绪处理程序，但是在您自己的代码中，您始终必须自己添加处理程序。

$(document).ready(function() {
  $('.server-name').click(function() {
    $(this).nextUntil('tr.server-name').slideToggle(500);
  });
});

请参阅此处的文档：
http://learn.jquery.com/using-jquery-core/document-ready/

如何在ERB中使用js + jQuery展开或折叠表格

1 个答案: