Javascript Rails 4按钮进行确认，单击后显示继续按钮

我正在用Ruby 2.4.0和Bootstrap 4 Alpha 6构建一个rails 5应用程序

我试图做的是有两个按钮，一个在页面加载时不可见，另一个在单击主按钮时显示。单击主按钮后，它将消失，次按钮将在屏幕上就位

我的初始按钮是：

<%= link_to "Confirm your Device", "#", class => "btn btn-warning, :id => "confirm" %>

“btn btn警告：id=>“确认”%>

将替换它的按钮是：

<%= link_to "Proceed to Carrier Selection", manufacturer_device_path(@manufacturer, device_div), :class => 'btn btn-outline-primary proceedButton', :id => "proceed" %> 

“btn btn大纲主程序按钮”，：id=>“继续”%>

我对如何使用JavaScript或jQuery实现这一点有点困惑

非常感谢您的帮助！

将您的按钮（

链接到

）放入

div

（以确保它们每次都出现在同一个位置）并使用自定义类（例如

隐藏

）隐藏第二个按钮（即

id=“继续”

），如下所示：

<style>
  .hide {
    display: none !important;
  }
</style>

<div>
  <%= link_to "Confirm your Device", "#", class: "btn btn-warning", :id => "confirm" %>
  <%= link_to "Proceed to Carrier Selection", manufacturer_device_path(@manufacturer, device_div), class: 'btn btn-outline-primary proceedButton hidden', :id => "proceed" %> 
</div>

上面的脚本隐藏单击的按钮（通过添加

隐藏
类），并显示最初隐藏的按钮（通过删除
隐藏
类）

检查此代码段（使用从上述代码生成的
html
）：


$（文档）.ready（函数（）{
$（“#确认”）。在（'click'，函数（事件）{
event.preventDefault（）；
$（this.addClass（'hide'）；
$（“#继续”）.removeClass（'hide'）；
});
})；
.hide{
显示：无！重要；
}
这是一个极好的回答和解释！
<script type="text/javascript">
  $(document).ready(function() {
    $('#confirm').on('click', function(event) {
      event.preventDefault();
      $(this).addClass('hide');
      $('#proceed').removeClass('hide');
    });
  });
</script>