Показать набор полей в зависимости от ввода предыдущего набора полей - PullRequest
Новая
       24

Показать набор полей в зависимости от ввода предыдущего набора полей

0 голосов
/ 17 октября 2018

Я довольно новичок в программировании, поэтому я надеюсь, что мои вопросы никого не беспокоят:

У меня есть многоэтапная форма, написанная на html, css и jQuery, которая показывает один слайд за другим.Я хочу следующее: он должен показывать не только следующий набор полей, но набор полей, основанный на вводе предыдущего набора полей.

Это один из моих наборов полей: 

 <fieldset id="Programming_Language">
    <h2 class="fs-title">Programming Language</h2>
    <h3 class="fs-subtitle">What did you use?</h3>
    <select>
  <option value="a">Java</option>
  <option value="b">JavaScript</option>
</select>
  </br>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>

Это код jQuery, который просто показывает следующий набор полей: 

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

Желаемое поведение - отображать набор полей с id = Java_Framework, если человек выбирает Java, и отображать набор полей с id =JavaScript_Framework, если человек выбирает JavaScript

Большое спасибо

1 Ответ

0 голосов
/ 17 октября 2018

Вы должны переопределить значение next_fs в зависимости от того, какой язык выбран.Предполагая, что у вас уже есть 2 набора полей после текущего набора полей, замените 

next_fs = $(this).parent().next();

на 

//do this only for this fieldset
if(current_fs.attr('id')=='Programming_Language'){ 
   var lang = current_fs.find('select').val(); //get the selected language

   if(lang=='a'){
      next_fs = $(this).parent().next('#Java_Framework');   
   }
   else if(lang=='b'){
      next_fs = $(this).parent().next('#JavaScript_Framework');
   }
   else{
      next_fs = $(this).parent().next();
   }
}
else{
    next_fs = $(this).parent().next();
}
...