JavaScript淡出幻灯片，修复按钮

Question

在过去的3-4个小时里，我一直在努力寻找最佳解决方案。我有一个表单，您可以在开头选择要填写的表单的幻灯片。

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

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

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

var arr = []; function validate() { if (document.getElementById('home-form').checked) { arr.push("home"); } if (document.getElementById('auto-form').checked) { arr.push("auto"); } if (document.getElementById('life-form').checked) { arr.push("life"); } if (document.getElementById('flood-form').checked) { arr.push("flood"); } if (document.getElementById('umbrella-form').checked) { arr.push("umbrella"); } if (document.getElementById('renters-form').checked) { arr.push("renters"); } if (document.getElementById('landlord-form').checked) { arr.push("landlord"); } }

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) +'%');
}

Answer 2

您可以按照以下步骤进行操作

• 为这些幻灯片（基本，家庭，自动，雨伞）创建HTML模板

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

  is_captain = 1

• 有一个父幻灯片div（假设#parent id），当点击Basic / Home // Umbrella / ..等时，将相应的模板加载到父级的内部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.....