Javascript 重置引导模式

所以，我使用的是bootstrap的modal

我想创建一个向导样式的模式，并提出了以下解决方案：

div代码段：

<div class="modal-instance hide fade" id="step1">
 <div id="stepa">
  ...
 </div>
</div>


<div id="stepb" style="display: none;">
 ...
</div>

这样行

但当我忽略模态时。div stepa仍由stepb替代。我的解决方案是在模式隐藏时构建一个返回到stepa的替换：

$("#myModal").on("hidden", function() { 
//replace the child
});

我试过：

$('#step1').children().remove();
$('#step1').append($('#stepa'));

及

---

但我很难选择step-a作为替换div，可能是因为它不是一个单独的div。我的问题是，这是向导样式的模态的正确方法还是我应该采取另一种方法？

只隐藏上一步和下一步，而不是复制它们要简单得多

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<div id="myModal" class="modal hide fade" data-step="1">
 <div class="step step1">
  <h1>Step 1</h1>
  <button class="btn next">Next</button>
 </div>
 <div class="step step2">
  <h1>Step 2</h1>
  <button class="btn previous">Previous</button>
  <button class="btn next">Next</button>
 </div>
 <div class="step step3">
  <h1>Step 3</h1>
  <button class="btn previous">Previous</button>
  <button class="btn done" data-dismiss="modal">Done</button>
 </div>
</div>

<style type="text/css">
  #myModal > .step { display: none; }​
</style>

<script type="text/javascript">
 $(function() {
  showStep(parseInt($('#myModal').data('step')) || 1);

  $('#myModal .next').on('click', function () {
   showStep(parseInt($('#myModal').data('step')) + 1);
  });

  $('#myModal .previous').on('click', function () {
   showStep(parseInt($('#myModal').data('step')) - 1);
  });

  $('#myModal').on('hidden', function() {
   showStep(1);
  });

  function showStep(step) {
   $('#myModal').data('step', step);
   $('#myModal > .step').hide();
   $('#myModal > .step' + step).show();
  }
 });​
</script>

启动模式
第一步
下一个
步骤2
以前的
下一个
步骤3
以前的
多恩
#myModal>.step{display:none；}​
$（函数（）{
showStep（parseInt（$（'#myModal'）.data（'step'））| 1）；
$（'#myModal.next'）。在（'click'，函数（）{
showStep（parseInt（$（'myModal'）。数据（'step'））+1；
});
$（'#myModal.previous'）。在（'click'，函数（）{
showStep（parseInt（$（'#myModal'）.data（'step'））-1）；
});
$（'#myModal'）。on（'hidden'，function（）{
步骤（1）；
});
功能显示步骤（步骤）{
$（'myModal'）。数据（'step'，step）；
$（'#myModal>.step'）.hide（）；
$（'#myModal>.step'+step）.show（）；
}
});​

---

$（“#步骤1”）.children（）.remove（）；你需要添加“.remove”@IvoJonkers它已经在删除孩子了，只是没有添加后退。非常感谢，这似乎是一个更符合逻辑的方法。我可以这样做。奇怪的是，不知怎的，我无法让第三步显示出来。仅当我手动编辑step3样式以显示：block；它会显示出来的。我只是在第3步中扩展了css和div，但我是否遗漏了其他内容？无法编辑我自己的评论：有趣的是，我编辑了你的JSFIDLE，它工作得很好。。奇怪的事，想想看。使用JS显示和隐藏可能会更容易，因为在CSS中添加步骤是一件（小）麻烦事。谢谢，我已经成功地将您的代码实现到我的项目中。

$("#step1").children("div:first").replaceWith($('#stepa'));

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<div id="myModal" class="modal hide fade" data-step="1">
 <div class="step step1">
  <h1>Step 1</h1>
  <button class="btn next">Next</button>
 </div>
 <div class="step step2">
  <h1>Step 2</h1>
  <button class="btn previous">Previous</button>
  <button class="btn next">Next</button>
 </div>
 <div class="step step3">
  <h1>Step 3</h1>
  <button class="btn previous">Previous</button>
  <button class="btn done" data-dismiss="modal">Done</button>
 </div>
</div>

<style type="text/css">
  #myModal > .step { display: none; }​
</style>

<script type="text/javascript">
 $(function() {
  showStep(parseInt($('#myModal').data('step')) || 1);

  $('#myModal .next').on('click', function () {
   showStep(parseInt($('#myModal').data('step')) + 1);
  });

  $('#myModal .previous').on('click', function () {
   showStep(parseInt($('#myModal').data('step')) - 1);
  });

  $('#myModal').on('hidden', function() {
   showStep(1);
  });

  function showStep(step) {
   $('#myModal').data('step', step);
   $('#myModal > .step').hide();
   $('#myModal > .step' + step).show();
  }
 });​
</script>