jquery - 我们如何通过点击rails来显示不同的表单部分

Question

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

例如：仪表板/菜单

在导航栏中，我有一个链接，如导师、公司。

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

前任：

_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");
)};

但是，当我单击导航栏链接时会发生注意事项。即使我没有得到任何错误。

更新：

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

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

Answer 1

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

$("#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() 以防止链接向服务器发送请求，从而仅呈现加载的代码。如果您想通过从服务器拉取数据来呈现表单，您可以使用远程链接。

Answer 2

您没有正确选择，您的 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");
)};