Question

如下所示，我有一个发送一些信息的表格。下面的Toggle按钮用于显示特定的<td>标记，并在点击时隐藏其他标记。我标记了here，应该在切换时显示，here2在切换时应该隐藏。

                    <td> <button id="to">Toggle</button> </td>
   here2 --->       <td> <img src="https: ~ "</td>
                    <td> </td>
                <% end %>
                <%= mv.hidden_field :tid, :value => movie.id %>
                <%= mv.hidden_field :nid, :value => (@matchables[movie.title] != 0 ? @matchables[movie.title].naver_id : "") %>
  here -->      <td><%= mv.text_field :nid, class: 'input-mini', placeholder: 'ID', value: (@matchables[movie.title] != 0 ? @matchables[movie.title].movie_id : "") %></td>
                <td></td>
                <td></td>
                <td><%= link_to 'delete', delete_item_admin_theaters_path(theater_id: movie.id), class: "btn btn-primary" %></td>
              </tr>
          <% end %>
      <% end %>
      </tbody>
    </table>
    <%= submit_tag('Register' , class: "btn btn-primary btn-lg") %>
    <% end %>
  </div>
</div>

为此，我编写了如下的简单脚本。

<script type="text/javascript">
        $("button").click(function () { $("td").toggle(); });
</script>

然而，我遇到了一些问题。

第一个是当我点击按钮时，它实际上似乎也激活了submit_tag。那里也有渲染奇怪的页面。

第二个问题是，当我点击按钮时，由于未指定td标记，它会删除所有td标记。

此外，我想知道如何分别设置标签的可见性，以便切换可以有效地工作。

Answer 1

对于第二个问题：我会给tds一些独特的ID。然后使用jquery id-selectors仅在那些id上运行切换你还需要确保＆＃34; here td＆＃34;在加载页面时隐藏。你可以通过添加一个用于隐藏它的css选项（比如display：none），或者使用jquery $（＆＃34;＃theId＆＃34;）隐藏它来保存它。hide（）。

现在假设＆＃34;在这里td＆＃39; s＆＃34; ID是＆＃34; movie_title＆＃34;和＃34; here2 td＆＃34;＆＃34; ID是＆＃34;图像＆＃34;你的脚本应该是这样的：

<script type="text/javascript">
        $("button").click(function () { $("#movie_title").toggle(); $("#image").toggle();  });
</script>

对于第一个问题：使用$（＆＃34;按钮＆＃34;）选择器将选择可能导致问题的所有按钮。尝试使用你已经拥有的唯一ID（id =＆＃34; to＆＃34;）然后使用id-selectors，如$（＆＃34;＃to＆＃34;）

祝你好运！

/张志贤

javascript切换显示和隐藏特定标记

1 个答案: