如何在ERB中使用js + jQuery展開或折疊表格

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一樣大了一天，我不確定哪里出了問題。

PS：我只使用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

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 個解決方案

解決方案1
0 已采納 2018-07-19 13:31:11

如何在ERB中使用js + jQuery展開或折疊表格

問題描述

1 個解決方案

解決方案1 0 已采納 2018-07-19 13:31:11

解決方案1
0 已采納 2018-07-19 13:31:11