JavaScript Fading Slides Out, кнопки фиксации

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 для этих слайдов (Basic, Home , Авто, Зонтик)

• Вы можете нажать эти 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 идентификатор), и когда Basic/Home // Зонт/.. и т.д. щелкают Загрузите соответствующий шаблон для внутренней HTML родителя. Пример: при нажатии кнопки Basic.

  $("#parent").html(Basic); //If you are using JQuery