JavaScript 淡出滑出，固定按钮

Question

在过去的 3-4 个小时里，我一直在绞尽脑汁想找出解决这个问题的最佳方法。我有一个表格，一开始你可以select你想填写表格的哪张幻灯片。

一旦对其中任何一个进行了 selected，它将显示该 selection 的部分。例如，如果我 select 回家了

根据复选框显示幻灯片的最佳方法是什么？此外，如果您注意到我在每张幻灯片的底部都有一个下一个按钮，我该如何自动更改它以替换为下一个 div 项目？

我当前检查 selected 框并插入数组的代码是

Answer 1

您可以按照以下步骤操作，

为这些幻灯片（基本、主页、自动、伞）创建 HTML 模板

您可以推送这些 HTML 模板。示例：

var Basic = '<div class="basic">
//Your HTML for Basic slide goes here..
</div>';

var Basic = '<div class="Umbrella">
//Your HTML for Umbrella slide goes here..
</div>';

// So on.....

有一个父幻灯片div（假设#parent id），当点击 Basic/Home//Umbrella/..etc 时，将相应的模板加载到父级的内部 HTML。 Example:When基本被点击
```
$("#parent").html(Basic); //If you are using JQuery
```

Answer 2

刚刚为您整理了这些：https://jsfiddle.net/r344Lygt/2/

当开始按钮被点击时，选中的复选框被迭代并添加到 selectedSteps 数组中。

JavaScript

var selectedSteps = [];
var currentStep = 0;

$('.start').on('click',function(){
  $('.nav input').each(function(){
    var i=0;
    if($(this).prop('checked')){ 
      selectedSteps.push($(this).attr('id'));
      i++;
    }
  });
  $('.splash').hide();
  goToForm(0);
});

$('[data-next]').on('click',function(){
  if(currentStep < (selectedSteps.length-1)) {
    currentStep++;
    goToForm(currentStep);
  } else {
    $('[data-form]').hide();
    $('[data-form="complete"]').show();
  }
});

function goToForm(step){
  $('[data-form]').hide();
  $('[data-form="'+selectedSteps[step]+'"]').show();
  $('.status span').css('width', 100 / selectedSteps.length * (currentStep+1) +'%');
}

JavaScript 淡出滑出，固定按钮

JavaScript Fading Slides Out, Fixing Buttons

javascript

jquery

html