如何通过单击rails显示不同的表单部分

Posted 2021-04-07

我有一个局部的导航栏渲染。

例如：仪表板/菜单

在navbar我有一个像导师，企业的链接。

单击这些链接时，它会呈现不同的表单部分。

例如：

_menu.html.erb

<a id="mentor" href="dasboard/settings">mentor</a>
<a id="corporate" href="dasboard/settings">corporate</a>

在设置页面中：设置页面中的指导者和公司表单。

<div id="men">
<% form_for() %>
  #mentor fields
<% end %>
</div>

<div id="cor">
<% form_for() %>
  #corporate fields
<% end %>
</div>

设置页面中的jquery和css：

#men,#cor{
 display: none;
}
$("#mentor").on("click", function(){
  $("#men").css("display", "block");
)};
$("#corporate").on("click", function(){
  $("#cor").css("display", "block");
)};

但是，当我点击导航栏链接时，什么也没发生。即使我没有得到任何错误。

更新：

我在设置页面中放置了导航链接。它的工作正常。

但是，从菜单部分它不起作用。

答案

你没有正确选择，你的jquery脚本有两个错误

1. 你没有正确选择。这个选择器$("men")不会选择任何东西，因为选择器不会men，直到你添加#。
2. css({"display: block"})这也是在任何元素上添加css的错误方法

试试以下

$("#mentor").on("click", function(){
  $("#men").css("display", "block");
)};
$("#corporate").on("click", function(){
  $("#cor").css("display", "block");
)};

另一答案

您的解决方案的正确代码将是

$("#mentor").on("click", function(event){
  event.preventDefault();
  $("#men").css("display", "block");
});

$("#corporate").on("click", function(event){
  event.preventDefault();
  $("#cor").css("display", "block");
});

这是JSbin的例子

注意：我添加了event.preventDefault（）以防止链接向服务器发送请求，因此只呈现加载的代码。如果要通过从服务器提取数据来呈现表单，可以使用远程链接。