javascript - Rails 4 确认按钮，单击后会显示继续按钮

Question

我正在使用 Ruby 2.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 中(以确保它们每次都出现在同一位置)并隐藏第二个按钮(即 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类)并显示最初隐藏的按钮(通过删除隐藏类)。

检查此片段(使用上面代码生成的 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 配对时不起作用。