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

Question

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

我要做的是有 2 个按钮，一个在页面加载时不可见，另一个在单击主按钮时出现。单击主按钮后，它会消失，辅助按钮将在屏幕上占据原位。

我的初始按钮是：

<%= 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内(以确保它们每次都出现在同一个位置(并隐藏第二个按钮(即 id="proceed" ( 使用自定义类(例如 hide (，像这样：

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

注意

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