javascript - 未捕获的语法错误 : Unexpected token ILLEGAL on Toggle

Question

当我尝试使用切换功能时收到此错误。可能是因为<%=i%>，但我不确定

<% @categorias.each do |categoria| %>
  <%i += 1%>
  <div id = "Categoria" onclick = "$(#<%=i%>).toggle();">
    <b> <%= categoria.categoria_pt %></b>
  </div>
  <% @pratos_precos.each do |pratos_preco| %>
    <% if @pratos.find(pratos_preco.prato_id).categoria_pratos_id.to_s == categoria.id.to_s %>
      <div id = <%=i%> style = "display:none">
        <tr>
          <table class="table-condensed table-bordered" style= "width: 98%">
            <td><%= @pratos.find(pratos_preco.prato_id).nome_pt %></td>
      </div>

当我单击“类别”div 时，出现该错误，但我不知道为什么。

如果我这样做:

<div id = "Categoria" onclick = "$( "#<%=i%>" ).toggle();">

我收到此错误:

 Uncaught SyntaxError: Unexpected token }

Answer 1

试试这个代码:

<% @categorias.each do |categoria| %>
  <% i += 1 %>
  <div id = "Categoria" onclick = "$('#<%= i %>').toggle();">
    <b><%= categoria.categoria_pt %></b>
  </div>
  <% @pratos_precos.each do |pratos_preco| %>
    <% if @pratos.find(pratos_preco.prato_id).categoria_pratos_id.to_s == categoria.id.to_s %>
      <div id = "<%= i %>" style = "display:none">
        <tr>
        <table class="table-condensed table-bordered" style= "width: 98%">
          <td><%= @pratos.find(pratos_preco.prato_id).nome_pt %></td>
      </div>

您会注意到 #<%= i %>部分现在用单引号括起来，以使生成的 jQuery 选择器有效。使用单引号而不是双引号，因为双引号已经包含在 onclick 周围。处理程序，其中包括 jQuery 选择器。

此外，带有 <div id = "<%= i %>" style = "display:none"> 的行现在，根据 HTML 规范，在 id 值周围使用双引号。

通过这两项更改，看起来应该可以按预期工作。