JavaScript 淡出滑出，修复按钮

Question

在过去的 3-4 个小时里，我一直在绞尽脑汁，试图找出解决这个问题的最佳解决方案。我有一个表格，一开始您可以选择要填写表格的哪些幻灯片。

选择其中任何一个后，它将显示该选择的部分。例如，如果我选择 home

基于复选框显示幻灯片的最佳方法是什么？另外，如果您注意到我在每张幻灯片的底部都有一个下一个按钮，我如何才能将其自动更改为下一个 div 项目替换？

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

var arr = [];
函数验证(){
if (document.getElementById('home-form').checked) {
arr.push("家");
}
if (document.getElementById('auto-form').checked) {
arr.push("自动");
}
if (document.getElementById('life-form').checked) {
arr.push("生命");
}
if (document.getElementById('flood-form').checked) {
arr.push("洪水");
}
if (document.getElementById('umbrella-form').checked) {
arr.push("雨伞");
}
if (document.getElementById('renters-form').checked) {
arr.push("租客");
}
if (document.getElementById('房东表单').checked) {
arr.push("楼主");
}
}

Answer 1

刚刚为您整理好了: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) +'%');
}