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

【问题标题】：How to expand or collapse table using js+ jquery in ERB如何在 ERB 中使用 js+ jquery 展开或折叠表格
【发布时间】：2018-12-27 04:01:24
【问题描述】：

我试图弄清楚如何在单击标题（此处为服务器名称）时展开和折叠表格行，并且它应该应用于特定标题（即已单击的标题）。

我的 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 模板代码中无效]

另外，我在我的 ruby 脚本中将 .html.erb 称为

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

【问题讨论】：

由于它适用于 JSFiddle，我将从查看 ERB 输出开始。您检查输出是否正确？
@Casper ：首先感谢您的时间，是的，除了展开和折叠部分外，它正在工作，其余输出看起来很完美，类似于 jsfiddle
嗯。必须有区别。您可以将输出复制到 JSFiddle 并以相同的方式在那里进行测试。只需将 ERB 输出复制粘贴到 JSFiddle 以验证它是否在那里工作。
您确定浏览器正在加载您的 .js 文件。在 .js 文件中调用 alert() 或使用网络调试器进行验证。

标签： javascript jquery html ruby

【解决方案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/

【讨论】：

非常感谢您在这里的时间，是的，我尝试使用像 <script type="text/javascript"> alert("Check"); </script> 这样的警报，在加载 html 页面时，我收到警报“CheckK”或弹出窗口另外，因为我是 JS 新手我不确定如何将您建议的代码附加到我现有的 js 中，它应该像下面这样吗？ $(document).ready(function() { $('.server-name').click(function(){ $(this).find('span').text(function(_, value){return value=='-'?'+':'-'}); $(this).nextUntil('tr.server-name').slideToggle(500, function(){ }); }); });
它成功了，非常感谢.. 我做了一些小的修改.. 非常高兴你能帮助一个新手 :) 我的投票没有被注册..
@ Casper ：出于好奇，我应该怎么做才能扩展我的输出以占据整个页面.. 目前好像页面的 1/3 被填满了。
听起来像是一个与这个 js 问题无关的 CSS 格式问题？如果是这种情况，那么最好发布一个新问题。否则我们将在这里讨论一个不相关的话题。
只需谷歌“css 垂直填充页面”。如果这就是你正在寻找的东西，它应该会给你一些想法。祝你好运。