Rails 4按钮以确认，一旦单击，它将显示“继续”按钮

Question

我正在用Ruby2.4.0和Bootstrap 4 Alpha 6构建一个rails 5应用程序。

我想做的是有两个按钮，一个是不可见的，当页面加载和另一个出现时，主按钮被点击。一旦主按钮被点击，它就会解散，第二个按钮就会在屏幕上占据位置。

我的第一个按钮是：

<%= 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', :id => "proceed" %> 

我有点困在如何用JavaScript或jQuery来实现这个目标上。

如果能提供任何帮助，我们将不胜感激！

Answer 1

将按钮(link_to)放入div (确保它们每次出现在同一个位置)，并使用自定义类(例如hide)隐藏第二个按钮(即id="proceed")，如下所示：

<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>

这将显示第一个按钮，并在加载页面时隐藏第二个按钮；现在您可以使用jQuery方法addClass()和removeClass()隐藏第一个按钮，并显示第二个按钮：

<script type="text/javascript">
  $(document).ready(function() {
    $('#confirm').on('click', function(event) {
      event.preventDefault();
      $(this).addClass('hide');
      $('#proceed').removeClass('hide');
    });
  });
</script>

上面的脚本隐藏了单击按钮的(通过添加hide类)，显示了最初隐藏的(通过删除hide类)。

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

​

$(document).ready(function() {
  $('#confirm').on('click', function(event) {
    event.preventDefault();
    $(this).addClass('hide');
    $('#proceed').removeClass('hide');
  });
});

.hide {
  display: none !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <a class="btn btn-warning" id="confirm" href="#">Confirm your Device</a>
  <a class="btn btn-outline-primary proceedButton hide" id="proceed" href="#">Proceed to Carrier Selection</a> 
</div>

​

Note

最初的答案使用的是show()和hide()方法(而不是addClass()和removeClass())，但是在与but配对时没有起作用。