如何在Rails from向导中使用JavaScript隐藏/显示后退/下一步按钮？

我已经用这个gem创建了一个向导表单：

就进入下一步和上一步而言，一切都在起作用。然而，在第一步中隐藏“prev”按钮而在最后一步中只显示“submit”按钮的“rails方式”是什么？这是我在js中要做的事情吗

_form.html.erb

<%= form_for(@wizard) do |f| %>

  <div>
    <div id="MyWizard" class="wizard">
      <ul class="steps">
        <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
        <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
        <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
      </ul>
    </div>
    <div class="step-content">
      <div class="step-pane active" id="step1">
        <div class="field">
          <%= f.label :field1 %><br />
          <%= f.text_field :field1 %>
        </div>
      </div>
      <div class="step-pane" id="step2">
        <div class="field">
          <%= f.label :field2 %><br />
          <%= f.text_field :field2 %>
        </div>
      </div>
      <div class="step-pane" id="step3">
        <div class="field">
          <%= f.label :field3 %><br />
          <%= f.text_field :field3 %>
        </div>
      </div>
      <input type="button" class="btn btn-mini" id="btnWizardPrev" value="prev">
      <input type="button" class="btn btn-mini" id="btnWizardNext" value="next"></br>

      <div>
        <%= f.submit :class => 'btn btn-mini btn-primary' %>
      </div>
    </div>
  </div>
<% end %>

---

旁注/问题-有没有一种方法可以将这个.js放在我的资产管道中，而不将其存储在application.js中？我试图在javascripts下创建一个单独的.js，但它没有拉进去。

在javascript文件中替换此块

$('#MyWizard').on('change', function(e, data) {
    console.log('change');
    if(data.step===3 && data.direction==='next') {
        // return e.preventDefault();
    }
});

带有以下块：（更新）

以上代码将根据您所处的步骤显示/隐藏按钮

第二个问题是：您是否在application.js中指定

/=require\u树。

。如果是，则尝试将代码封装在

$（document）.ready（function（）{..code在这里..}）

更新参见上面更新的代码。我不确定这是否是正确的方法，但我能够让它以这种方式工作

同时添加

#btnWizardPrev{display:none；}

假设：表格中有三个步骤。若有更多情况，则需要在switch语句中添加更多案例。基本上，在这种情况下，您需要中断案例2:语句。在

情况2中：

下一步条件用于删除下一步按钮，因此如果有更多步骤，请将

下一步

条件移动到最后一步

---

更新将您的提交按钮代码替换为

'btn btn mini btn primary'，：id=>'向导提交'>

。这将简单地向提交按钮添加id属性。您可以使用任何值作为其id。然后只需通过添加此css

#wizard submit{dispay:none}

隐藏submit按钮，然后在javascript文件中使用上述更新的jquery代码。

向导插件已经在第一步禁用了上一个按钮。它查找向导容器中的

按钮.btn prev

<div id="myWizard" class="wizard">
  <div class="actions">
    <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
    <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
  </div>

---

尝试打印

数据的结果。在上面的块中执行步骤

。并更新所有步骤的结果。我的意思是在

$（“#MyWizard”）之后添加
警报（data.step）
或
控制台.log（data.step）
。在（'change'，函数（e，data）{

行，查看它们返回什么，通过更新，我的意思是告诉我们这样做时会发生什么。：）很抱歉不清楚。我已经提到..还要在样式表中添加#btnWizardPrev{display:none；}。它最初会隐藏上一个按钮。：）我不能这么说..因为我花了一天多的时间才回答它。：（因为我必须创建一个示例应用程序来查看到底发生了什么。我已经更新了代码。请检查它，如果无法解决您的问题，请告诉我。）感谢您查看。我在视图中尝试了上面的“actions div”。但每次单击“下一步”或“上一步”按钮，它都会提交整个表单。也许我的application.js中有错误？

$('#MyWizard').on('change', function(e, data) {
  console.log('change');
  $('#wizard-submit').hide(); //hide the submit button on each step.
  if(data.step === 3 && data.direction === 'next') {
    // return e.preventDefault();
    $('#wizard-submit').show(); //show the submit button only on last(3rd in your case) step.
  }

  switch(data.step) {
    case 1:
      if(data.direction === 'next')
        $('#btnWizardPrev').show();
      else
        $('#btnWizardPrev').hide();

      $('#btnWizardNext').show();
      break;
    case 2:
      if(data.direction === 'next') {
        $('#btnWizardPrev').show();
        $('#btnWizardNext').hide();
      }
      else {
        $('#btnWizardPrev').hide();
        $('#btnWizardNext').show();
      }
      break;
    case 3:
      // I would recommend to show the prev button on last step but hide the next button.
      if(data.direction === 'next')
        $('#btnWizardNext').hide();
      else
        $('#btnWizardNext').show();

      $('#btnWizardPrev').show();
      break;
    default:
      $('#btnWizardPrev').show();
      $('#btnWizardNext').show();
  }
});

<div id="myWizard" class="wizard">
  <div class="actions">
    <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
    <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
  </div>

.wizard button.btn-prev[disabled] {
  display: none;
}