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类）和显示最初隐藏的按钮（通过删除{{1 }）。）。

检查此代码段（使用上面代码中生成的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()）但与boostrap配对时无法使用。

Rails 4按钮确认，点击后显示继续按钮

1 个答案: